Controlla se tutte le caselle di controllo sono selezionate


139

Come posso verificare se tutte le caselle con class="abc"sono selezionate?

Devo controllarlo ogni volta che uno di essi viene controllato o deselezionato. Lo faccio facendo clic o modifica?

Risposte:


257

Penso che il modo più semplice sia verificare questa condizione:

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

Puoi farlo ogni volta che viene selezionata una nuova casella di controllo:

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

2
lengthnon è una funzione penso che intendevi ..size()
Jishnu AP

3
Grazie @TheSuperTramp! Volevo dire length, ma non dimentico mai di dimenticare che è una proprietà e non un metodo. Corretto
cbrandolino il

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

2
Soluzione perfetta, pulita ed elegante. "if ($ ('input.abc'). not (": checked "). length) {...}" funziona anche.
Skorunka František,

1
Quella risposta non è corretta. Verifica se ci sono caselle di controllo selezionate. Ma la domanda è Verifica se tutte le caselle di controllo sono selezionate . Quindi il codice corretto è: $('input.abc').not(':checked').length === 0.
hlcs,

1
Questa risposta è migliore della risposta accettata se si considera la prestazione. Questo eseguirà il ciclo solo una volta, anziché due volte.
Maarten Kieft,

15

Puoi usare change()

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

Tutto ciò che farà è verificare che il numero totale di .abccaselle di controllo corrisponda al numero totale di .abc:checked.

Esempio di codice su jsfiddle .


Non so davvero perché, ma la mia a.length mi dà un valore di 8 mentre ho solo 4 caselle di controllo.
santa

La filterè una buona soluzione per un gruppo di caselle di controllo, grazie molto.
overallduka,


3

Parte 1 della tua domanda:

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

MODIFICARE:

La risposta (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) è probabilmente migliore.


1

I criteri di ricerca sono uno di questi:

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

Probabilmente vuoi connetterti all'evento change.


1

In alternativa, avresti potuto usare anche ogni ():

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

Una soluzione indipendente di classe

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

1

Ecco come l'ho raggiunto nel mio codice:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.