すべてのチェックボックスが選択されているかどうかを確認します


139

のすべてのチェックボックスclass="abc"が選択されているかどうかを確認するにはどうすればよいですか?

そのうちの1つがオンまたはオフになっているたびにチェックする必要があります。クリックまたは変更でそれを行いますか?

回答:


256

私は最も簡単な方法はこの状態をチェックすることだと思います:

$('.abc:checked').length == $('.abc').length

新しいチェックボックスがチェックされるたびにそれを行うことができます:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});

2
length..私はあなたが意味するものだと思うfuncionではありませんsize()
ジッシュヌAP

3
@TheSuperTrampに感謝!を意味しましたがlength、それがプロパティであってメソッドではないことを忘れないでください。修正済み
cbrandolino

97
$('input.abc').not(':checked').length > 0

2
完璧でクリーンでエレガントなソリューション。「if($( 'input.abc')。not( ":checked")。length){...}」も機能します。
SkorunkaFrantišek16年

1
その答えは正しくありません。チェックされているチェックボックスがあるかどうかをチェックします。しかし問題はすべてのチェックボックスが選択されているかどうかを確認することです。したがって、正しいコードは次のとおり$('input.abc').not(':checked').length === 0です。
hlcs 2017年

1
パフォーマンスを考慮した場合、この回答は受け入れられた回答よりも優れています。これは2回ではなく1回だけループします。
Maarten Kieft 2017年

15

使用できます change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

これは、.abcチェックボックスの総数がの総数と一致することを確認するだけです.abc:checked

jsfiddleのコード例。


理由はよくわかりませんが、チェックボックスは4つしかありませんが、a.lengthの値は8です。
サンタ

これfilterは、チェックボックスのグループに適したソリューションです。
overallduka


3

あなたの質問のパート1:

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

編集:

上記の答え(http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480)はおそらくより良いでしょう。


1

検索基準は次のいずれかです。

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

おそらく変更イベントに接続する必要があります。


1

あるいは、every()を使用することもできます。

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});

1

クラスに依存しないソリューション

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}

1

これは私が私のコードでそれを達成した方法です:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.