Tüm onay kutularının seçili olup olmadığını kontrol edin


139

İle birlikte tüm onay kutularının işaretli olup olmadığını nasıl kontrol edebilirim class="abc"?

Bunlardan biri her kontrol edildiğinde veya işaretlenmediğinde kontrol etmem gerekiyor. Tıklama veya değiştirme üzerine yapabilir miyim?

Yanıtlar:


257

Bence en kolay yol bu durumu kontrol etmektir:

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

Her yeni bir onay kutusu işaretlendiğinde bunu yapabilirsiniz:

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

2
lengthdemek istediğini düşünüyorum bir funcion değil ..size()
Jishnu AP

3
Teşekkürler @TheSuperTramp! Demek istediğim length, ama bir yöntem değil, bir özellik olduğunu asla unutmam. Düzeltildi
cbrandolino

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

2
Mükemmel, temiz ve zarif bir çözüm. "if ($ ('input.abc'). not (": işaretli "). uzunluk) {...}" da çalışır.
Skorunka František

1
Bu cevap doğru değil. İşaretli onay kutusunun olup olmadığını kontrol eder. Ancak soru Tüm onay kutularının seçilip seçilmediğini kontrol etmektir . Yani doğru kodudur: $('input.abc').not(':checked').length === 0.
hlcs

1
Performansı düşünüyorsanız, bu cevap kabul edilen cevaptan daha iyidir. Bu, iki kez yerine yalnızca bir kez döngü yapar.
Maarten Kieft

15

Kullanabilirsiniz change()

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

Tüm yapmanız gereken, toplam .abconay kutusu sayısının toplam sayısıyla eşleştiğini doğrulamaktır .abc:checked.

Jsfiddle'da kod örneği .


Neden emin değilim, ama sadece 4 onay kutuları varken benim a.length bana 8 değerini verir.
Noel Baba

filterOnay kutuları, çok teşekkür grup için iyi bir çözümdür.
overallduka


3

Sorunuzun 1. Bölümü:

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

DÜZENLE:

Yukarıdaki cevap (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) muhtemelen daha iyidir.


1

Arama kriterleri şunlardan biridir:

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

Muhtemelen değişiklik olayına bağlanmak istiyorsunuz.


1

Alternatif olarak, her () öğesini de kullanabilirsiniz:

// 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

Sınıftan bağımsız bir çözüm

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

1

Kodumda bu şekilde elde ettim:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.