Periksa apakah semua kotak centang dipilih

139

Bagaimana cara memeriksa apakah semua kotak centang dengan class="abc" dipilih?

Saya perlu memeriksanya setiap kali salah satu dari mereka dicentang atau tidak dicentang. Apakah saya melakukannya saat klik atau berubah?

jquery santa
sumber

Jawaban:

257

Saya pikir cara termudah adalah memeriksa kondisi ini:

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

Anda bisa melakukannya setiap kali kotak centang baru dicentang:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});
cbrandolino
sumber
2
lengthbukan fungsi yang saya pikir Anda maksud ..size()
Jishnu AP
3
Terima kasih @TheSuperTramp! Maksud saya length, tetapi saya tidak pernah lupa bahwa ini adalah properti dan bukan metode. Dikoreksi
cbrandolino
97 
$('input.abc').not(':checked').length > 0
Porco
sumber
2
Solusi sempurna, bersih dan elegan. "if ($ ('input.abc'). not (": checked "). length) {...}" juga berfungsi.
Skorunka František
1
Jawaban itu tidak benar. Itu memeriksa apakah ada kotak centang diperiksa. Tetapi pertanyaannya adalah Periksa apakah semua kotak centang dipilih . Jadi kode yang benar adalah: $('input.abc').not(':checked').length === 0.
hlcs
1
Jawaban ini lebih baik daripada jawaban yang diterima jika Anda mempertimbangkan kinerja. Ini akan berulang sekali saja, bukan dua kali.
Maarten Kieft
15

Kamu bisa memakai change()

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

Semua ini akan dilakukan adalah memverifikasi bahwa jumlah total .abckotak centang cocok dengan jumlah total .abc:checked.

Contoh kode pada jsfiddle .

Mark Coleman
sumber
Tidak begitu yakin mengapa, tapi a.length saya memberi saya nilai 8 sementara saya hanya memiliki 4 kotak centang.
santa
Ini filteradalah solusi yang bagus untuk sekelompok kotak centang, terima kasih banyak.
overallduka
5 
$('.abc[checked!=true]').length == 0
manji
sumber
3

Bagian 1 dari pertanyaan Anda:

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

EDIT:

Jawabannya (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) di atas mungkin lebih baik.

Dave L.
sumber
1

Kriteria pencarian adalah salah satunya:

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

Anda mungkin ingin terhubung ke acara perubahan.

Steve Wellens
sumber
1

Atau, Anda bisa menggunakan setiap ():

// 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;
    }
});
Nick Cordova
sumber
1

Solusi independen kelas 

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

Ini adalah bagaimana saya mencapainya dalam kode saya:

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