Vérifiez si toutes les cases à cocher sont cochées

139

Comment vérifier si toutes les cases à cocher avec class="abc"sont cochées ?

Je dois le vérifier chaque fois que l'un d'entre eux est coché ou décoché. Dois-je le faire en cliquant ou en changeant?

jquery Père Noël
la source

257

Je pense que le moyen le plus simple est de vérifier cette condition:

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

Vous pouvez le faire à chaque fois qu'une nouvelle case est cochée:

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

cbrandolino
la source

2

lengthn'est pas une fonction que je pense que vous vouliez dire ..size()

Jishnu AP

3

Merci @TheSuperTramp! Je voulais dire length, mais je n'oublie jamais que c'est une propriété et non une méthode. Corrigé

cbrandolino

97

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

Porco
la source

2

Solution parfaite, propre et élégante. "if ($ ('input.abc'). not (": checked "). length) {...}" fonctionne également.

Skorunka František

1

Cette réponse n'est pas correcte. Il vérifie si des cases à cocher sont cochées. Mais la question est de vérifier si toutes les cases sont cochées . Donc , le bon code est: $('input.abc').not(':checked').length === 0.

hlcs

1

Cette réponse est meilleure que la réponse acceptée si vous considérez la performance. Cela ne boucle qu'une seule fois, au lieu de deux.

Maarten Kieft

15

Vous pouvez utiliser change()

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

Tout cela va faire est de vérifier que le nombre total de .abccases à cocher correspond au nombre total de .abc:checked.

Exemple de code sur jsfiddle .

Mark Coleman
la source

Je ne sais pas vraiment pourquoi, mais mon a.length me donne une valeur de 8 alors que je n'ai que 4 cases à cocher.

Père

C'est filterune bonne solution pour un groupe de cases à cocher, merci beaucoup.

generalduka

5

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

manji
la source

3

Partie 1 de votre question:

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

ÉDITER:

La réponse (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) ci-dessus est probablement meilleure.

Dave L.
la source

1

Le critère de recherche est l'un de ceux-ci:

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

Vous souhaitez probablement vous connecter à l'événement de modification.

Steve Wellens
la source

1

Alternativement, vous auriez pu également utiliser 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
la source

1

Une solution indépendante de la classe

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

PHPer
la source

1

Voici comment je l'ai réalisé dans mon code:

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

Jaime Montoya
la source

Vérifiez si toutes les cases à cocher sont cochées

Réponses: