Проверьте, все ли флажки установлены

139

Как проверить, все ли флажки class="abc"установлены?

Мне нужно проверять это каждый раз, когда один из них отмечен или не отмечен. Я делаю это по щелчку или изменению?

jquery Санта
источник

Ответы:

262

Я думаю, что самый простой способ проверить это условие:

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

Вы можете делать это каждый раз, когда ставится новый флажок:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});
Cbrandolino
источник
2
lengthэто не функция, я думаю, вы имели в виду ..size()
Jishnu AP
3
Спасибо @TheSuperTramp! Я имел в виду length, но никогда не забываю, что это свойство, а не метод. Исправлено
cbrandolino
102 
$('input.abc').not(':checked').length > 0
Порко
источник
2
Идеальное, чистое и элегантное решение. "if ($ ('input.abc'). not (": checked "). length) {...}" также работает.
Скорунка Франтишек
2
Этот ответ неверен. Он проверяет, установлены ли какие-либо флажки. Но вопрос в том, проверьте, все ли флажки установлены . Таким образом, правильный код: $('input.abc').not(':checked').length === 0.
hlcs
1
Этот ответ лучше, чем принятый, если учесть производительность. Это будет повторяться только один раз, а не дважды.
Maarten Kieft
1
Этот подход более понятен, поскольку не требует знания селектора, используемого для получения исходной коллекции jQuery - аналогично вы можете использовать его $someCollection.is(':checked').lengthдля других связанных тестов. Также см. Stackoverflow.com/questions/16576560 для заметок о дальнейшей оптимизации.
Джейк
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хорошее решение для группы флажков, большое спасибо.
overallduka
4

Часть 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) выше, вероятно, лучше.

Дэйв Л.
источник
Это наиболее эффективный ответ, поскольку он замыкается, как только будет обнаружен не отмеченный флажок. Однако вы можете использовать, thisа не elementизбегать обратного вызова, требующего каких-либо явных параметров.
Джейк
1

Критерий поиска один из следующих:

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

Вероятно, вы захотите подключиться к событию изменения.

Стив Велленс
источник
1

Классно-независимое решение 

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}
PHPer
источник
1

Вот как я добился этого в своем коде:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
Хайме Монтойя
источник
0

В качестве альтернативы вы также можете использовать 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;
    }
});
Ник Кордова
источник