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

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

5

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

— Manji
источник

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

— Ник Кордова
источник