检查是否选中所有复选框


138

如何检查是否选中了所有带有class="abc"的复选框?

每当其中一项被选中或未选中时,我都需要对其进行检查。单击或更改是否要执行?

Answers:


255

我认为最简单的方法是检查这种情况:

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

您可以在每次选中新复选框时执行此操作:

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

2
length不是功能,我想你是说..size()
Jishnu AP 2011年

3
谢谢@TheSuperTramp!我的意思是length,但我永远不会忘记它是一个属性而不是一个方法。已更正
cbrandolino

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

2
完美,干净和优雅的解决方案。“ if($('input.abc')。not(“:checked”)。length){...}“也可以。
SkorunkaFrantišek'16

1
那答案不正确。它检查是否选中了任何复选框。但是问题是检查所有复选框是否被选中。因此正确的代码是:$('input.abc').not(':checked').length === 0
hlcs

1
如果您考虑性能,则此答案要比公认的答案更好。这只会循环一次,而不是两次。
Maarten Kieft

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上的代码示例。


不确定为什么,但是我的a.length给我的值为8,而我只有4个复选框。
圣诞老人

filter是一组复选框,感谢很多的很好的解决方案。
2014年


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();
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.