Verifique se todas as caixas de seleção estão marcadas

139

Como verifico se todas as caixas de seleção class="abc"estão marcadas?

Preciso verificar todas as vezes que uma delas é marcada ou desmarcada. Faço isso ao clicar ou alterar?

santa
fonte

Respostas:

257

Eu acho que a maneira mais fácil é verificar esta condição:

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

Você pode fazer isso toda vez que uma nova caixa de seleção estiver marcada:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});
cbrandolino
fonte
2
lengthnão é um funcion eu acho que você quis dizer ..size()
Jishnu AP
3
Obrigado @TheSuperTramp! Eu quis dizer length, mas nunca deixo de esquecer que é uma propriedade e não um método. Corrigido
cbrandolino 04/04
97
$('input.abc').not(':checked').length > 0
Porco
fonte
2
Solução perfeita, limpa e elegante. "if ($ ('input.abc'). not (": marcado "). length) {...}" também funciona.
Skorunka František 21/10
1
Essa resposta não está correta. Ele verifica se há alguma caixa de seleção marcada. Mas a pergunta é Verifique se todas as caixas de seleção estão marcadas . Assim, o código correto é: $('input.abc').not(':checked').length === 0.
HLCS
1
Essa resposta é melhor que a resposta aceita se você considerar o desempenho. Isso fará um loop apenas uma vez, em vez de duas.
Maarten Kieft
15

Você pode usar change()

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

Tudo o que isso fará é verificar se o número total de .abccaixas de seleção corresponde ao número total de .abc:checked.

Exemplo de código no jsfiddle .

Mark Coleman
fonte
Não tenho muita certeza do porquê, mas meu comprimento a. Me fornece um valor de 8 enquanto eu tenho apenas 4 caixas de seleção.
Santa
A filteré uma boa solução para um grupo de caixas de seleção, muito obrigado.
overallduka
5
$('.abc[checked!=true]').length == 0
manji
fonte
3

Parte 1 da sua pergunta:

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

EDITAR:

A resposta (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) acima provavelmente é melhor.

Dave L.
fonte
1

O critério de pesquisa é um destes:

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

Você provavelmente deseja se conectar ao evento de mudança.

Steve Wellens
fonte
1

Como alternativa, você também pode ter usado 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;
    }
});
Nick Cordova
fonte
1

Uma solução independente de classe

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

Foi assim que consegui isso no meu código:

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