Vérifiez si au moins une case à cocher est cochée en utilisant jQuery

J'ai cinq cases à cocher. En utilisant jQuery, comment vérifier si au moins l'un d'entre eux est vérifié?

<input type="checkbox" name="service[]"> <br /> <input type="checkbox" name="service[]"> <br /> <input type="checkbox" name="service[]"> <br /> <input type="checkbox" name="service[]"> <br /> <input type="checkbox" name="service[]"> 

Modifier: La solution originale dans cette réponse est inefficace et ne doit pas être utilisée. Consultez la solution révisée en fonction des commentaires et des exemples d'autres réponses à cette question.

La solution originale (mauvaise) suit:

 // DO NOT USE; SEE BELOW $('button').click(function () { var atLeastOneIsChecked = false; $('input:checkbox').each(function () { if ($(this).is(':checked')) { atLeastOneIsChecked = true; // Stop .each from processing any more items return false; } }); // Do something with atLeastOneIsChecked }); 

L'utilisation de .each () est redondante dans cet exemple, car .is () peut être utilisé directement sur l'ensemble des objets plutôt que d'itérer itérativement par chacun d'eux. Une solution plus efficace suit:

 $('button').click(function () { var atLeastOneIsChecked = $('input:checkbox').is(':checked'); // Do something with atLeastOneIsChecked }); 

Notez que l'un des commentaires indique une forte aversion pour $(this).is(':checked') . Pour clarifier, il n'y a rien de mal à is(':checked') dans les cas où vous testez un ensemble d'objets. Cela dit, l'appel is(':checked') sur un seul élément est beaucoup moins efficace que l'appel. .checked sur le même élément. Cela implique également un appel inutile à la fonction $.

is() peut faire cela, et est sans doute la seule utilisation acceptable de is(":checked") :

À partir des documents jQuery, http://api.jquery.com/is/ :

Vérifiez l'ensemble d'éléments appariés actuels contre un objet sélecteur, élément ou jQuery et retournez true si au moins un de ces éléments correspond aux arguments donnés.

 alert($("input[name='service[]']").is(":checked")); 

Exemple: http://jsfiddle.net/AndyE/bytVX/1/ (basé sur le violon de Brandon Gano )

Alternativement, et potentiellement plus rapide, vous pouvez passer une fonction à is() :

 $("input[name='service[]']").is(function () { return this.checked; }); 

Cela devrait faire l'affaire:

 function isOneChecked() { return ($('[name="service[]"]:checked').length > 0); } 

Une autre réponse:

 !!$("[type=checkbox]:checked").length 

ou

 !!$("[name=service[]]:checked").length 

Cela dépend de ce que vous voulez.

 var checkboxes = document.getElementsByName("service[]"); if ([].some.call(checkboxes, function () { return this.checked; })) { // code } 

Ce que vous voulez est simple, obtenez tous les éléments avec le nom, puis exécutez un code si certains de ces éléments sont vérifiés.

Pas besoin de jQuery.

Vous avez peut-être besoin d'une caisse ES5 pour les navigateurs hérités

Vous devriez essayer comme ça …

 var checkboxes = $("input[type='checkbox']"), submitButt = $("input[type='submit']"); checkboxes.click(function() { submitButt.attr("disabled", !checkboxes.is(":checked")); 

});

Vous devez vérifier si la case à cocher est cochée ou non.

 $("#select_all").click(function(){ var checkboxes = $("input[type='checkbox']"); if(checkboxes.is(":checked")) alert("checked"); else alert("select at least one; }); 
 var atLeastOneIsChecked = $('input[name="service[]"]:checked').length > 0;