Kiểm tra nếu tất cả các hộp kiểm được chọn

Làm cách nào để kiểm tra xem tất cả các hộp kiểm có class="abc"được chọn không?

Tôi cần kiểm tra nó mỗi khi một trong số chúng được kiểm tra hoặc bỏ chọn. Tôi có làm điều đó khi nhấp hoặc thay đổi không?

Tôi nghĩ rằng cách dễ nhất là kiểm tra tình trạng này:

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

Bạn có thể làm điều đó mỗi khi hộp kiểm mới được chọn:

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

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

Bạn có thể dùng change()

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

Tất cả điều này sẽ làm là xác minh rằng tổng số .abchộp kiểm phù hợp với tổng số .abc:checked.

Mã ví dụ trên jsfiddle .

$('.abc[checked!=true]').length == 0

Phần 1 câu hỏi của bạn:

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

BIÊN TẬP:

Câu trả lời (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) ở trên có lẽ tốt hơn.

Các tiêu chí tìm kiếm là một trong những tiêu chí sau:

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

Bạn có thể muốn kết nối với sự kiện thay đổi.

Ngoài ra, bạn cũng có thể đã sử dụng mọi ():

// 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;
    }
});

Một giải pháp độc lập lớp

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

Đây là cách tôi đạt được nó trong mã của mình:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}