チェックボックスのオン/オフを切り替え


397

私は以下を持っています:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

id="select-all-teammembers"クリックしたときにチェック済みとチェックなしを切り替えたいのですが。アイデア?それは数十行のコードではありませんか?

回答:


723

あなたは書ける:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

jQuery 1.6より前のバージョンでは、prop()ではなくattr()しかなかったため、以前は次のように記述していました。

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

ただし、「ブール」HTML属性に適用する場合prop()よりもセマンティクスが優れているattr()ため、通常、この状況で推奨されます。


4
これは最初のステータスに基づいてステータスを取得するため、わかりにくくなる可能性があります(したがって、ユーザーが最初のステータスをチェックしてから、トグルを使用すると、同期が取れなくなります)。リストの最初のチェックボックスではなく、トグルのステータスに基づくように少し調整しました:$( "input [name = recipients \ [\]]")。prop( "checked"、$(this).prop( "チェックされている "));
CookiesForDevo

6
'prop'を使用すると、Zeptoでもこれが機能します。それ以外の場合は、ボックスをチェックしますが、チェックを外しません。
SimplGy 2012年

1
「attr」ではなく「prop」がトリックを実行しました。「attr」を使用すると、しばらくの間トグルしてから停止し、「prop」を使用すると期待どおりにトグルします。更新の+1。
TechNyquist 2013年

11
$('input[type=checkbox]').trigger('click');以下の@ 2astalavistaで言及されているのはより簡潔であり、「変更」イベントをトリガーします。
ここでは

1
@CookiesForDevoの回答をサポートするように回答を編集できますか
acquayefrank

213
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Chrome 29では機能しますが、FF 17.0.7では機能しません。誰かがそれを確認できますか?
Griddo 2013年

私は長い間、物件を変更するルートをたどっていました。私にとって、これはチェックボックス要素をチェックおよびチェック解除するための優れた、より柔軟なアプローチです。
Isioma Nnodum 2013年

不要なイベントがトリガーされます。
Jehong Ahn、

チェックボックスの場合、ラベルをクリックすることで変更できるため、「変更」イベントを発生させることをお勧めします。
Peter Lenjo、

61

私はこれが古いことを知っていますが、トグルが各チェックボックスの状態を切り替える必要があることを意味する可能性があるという点で、質問は少しあいまいでした。3つをチェックし、2つをチェックしていない場合、トグルすると、最初の3つがチェック解除され、最後の2つがチェックされます。

そのため、各チェックボックスの状態を切り替えるのではなく、すべてのチェックボックスを同じ状態にするため、ここでのソリューションは機能しません。やって$(':checkbox').prop('checked')多くのチェックボックスには、論理を返し、すべての間で.checkedそれらのいずれかがチェックされていない場合は、バイナリの性質、すなわち、返された値ですfalse

.each()すべてを等しくするのではなく、実際に各チェックボックスの状態を切り替えたい場合に使用する必要があります。たとえば、

   $(':checkbox').each(function () { this.checked = !this.checked; });

プロパティはすべてのブラウザーに存在する$(this)ため、ハンドラー内での必要はありません.checked


5
はい、これはすべてのチェックボックスの状態を切り替える正しい答えです!
Sydwell 2013年

1
多数のチェックボックスがある場合、jQueryでクリックをトリガーするよりも桁違いに高速です。
ジェレミークック

16

ここにあなたが望む別の方法があります。

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

9
それは切り替えではありません。
AgentFire 2012

2
@kst-これはより良い方法です$( 'input [name = recipients \ [\]]')。toggle(this.checked); クラスを忘れてください。
Davis

11

クリックをトリガーする方が簡単だと思います。

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

9

私が考えることができる最良の方法。

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

または

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

または

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

8

jQuery 1.6以降で.prop(function)は、見つかった各要素のチェック状態を切り替えるために使用できます。

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

すばらしい答えです。アンダースコアを最初のパラメーターとして渡すことについて知っていますか?それについてどこでもっと知ることができますか?
user1477388 16

1
編集:どうやら、基本的にnullを渡すための手段であるstackoverflow.com/questions/11406823/...を
user1477388

8

このプラグインを使用:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

その後

$('#myCheckBox').toggleCheck();

2

チェックボックスを切り替える必要のある画像だとすると、これは私にとってはうまくいきます

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

4
これが最初の回答であるため、質問で使用したポスターのパターンに従うことが最もよくあることを認識してください。たとえば、jQueryコードをマークアップのインラインではなく、ドキュメント準備ハンドラーに配置します。それをしない理由がある場合は、その理由を説明してください。
Mark Schultheiss、2012年

2

チェックインのすべてのチェックボックスを更新する必要があり、それ自体を一定の条件の下で。'#select-all-teammembers'をクリックしてから、いくつかのアイテムのチェックを外して、もう一度[select-all]をクリックしてください。矛盾が見られます。これを防ぐには、次のトリックを使用します。

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

ところで、上記のように、DOMオブジェクトのすべてのチェックボックスをキャッシュする必要があります。


2

これは、html5とラベルが付いたチェックボックスを選択せず​​にチェックボックスを切り替えるjQueryの方法です。

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx


1

各ボックスを個別に切り替えたい場合(または1つのボックスだけでも機能する場合):

.each()を使用することをお勧めします。さまざまなことを実行したい場合は簡単に変更でき、しかも比較的短くて読みやすいからです。

例:

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });

// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });

// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

余談ですが、なぜ誰もが.attr()または.prop()を使用して物事をチェック(アン)するのかわかりません

私の知る限り、element.checkedはすべてのブラウザで常に同じように機能しましたか?


1
jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

;)


1

このように書くこともできます

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

ユーザーがID '#checkbox-toggle'のボタンをクリックしたときに、チェックボックスのクリックイベントを呼び出すだけです。


1

より良いアプローチとUX

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

1
<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

試してください:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

1

これは私にはとてもうまくいきます。

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

1
「checked」プロパティに、すでに持っているものとまったく同じ値を与えていることに気づきますか?少し恥ずかしくないですか?あなたは明らか!にそれの前にサインを置く
つもりでし

1

最も基本的な例は次のとおりです。

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');

// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);

// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};
<input type="checkbox">
<button>Toggle checkbox</button>


1

単にあなたはこれを使うことができます

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

0

私の推測では、通常のバリアントを提案した最も正しい人はGigolNet Gigolashviliですが、さらに美しいバリアントを提案したいと思います。チェックして

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

0

trueまたはfalseの代わりに「checked」またはnullを設定すると、作業が実行されます。

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

0

このコードは、Webテンプレートで使用されるトグルスイッチアニメーターをクリックすると、チェックボックスをトグルします。コードで使用可能な「.onoffswitch-label」を置き換えます。「checkboxID」は、ここで切り替えられるチェックボックスです。

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});

-3

より簡単な方法があります

まずチェックボックスにクラスの例 'id_chk'を与えます

次に、チェックボックス内で「id_chk」チェックボックスの状態を制御します。

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

それがすべて、これが役に立てば幸い

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.