Vérifiez si la case à cocher est cochée avec jQuery
-
Vérifiez si la case à cocher est cochée avec les opérations DOM directes à l’aide de la méthode
.get() -
Vérifiez si la case à cocher est cochée avec la méthode
.prop() -
Vérifiez si la case à cocher est cochée avec la méthode
.is() - Cas d’utilisation courants pour vérifier si la case à cocher est cochée avec jQuery
Vous apprendrez plusieurs méthodes pour cocher la case jQuery dans cet article de blog. Nous discuterons également de leurs mesures de performance pour vous permettre de choisir la meilleure méthode pour chaque cas d’utilisation.
Nous montrerons des raccourcis utiles pour les cas d’utilisation courants des cases à cocher. Nous avons également un piège pour une erreur courante que les gens font.
Vérifiez si la case à cocher est cochée avec les opérations DOM directes à l’aide de la méthode .get()
jQuery nous permet d’accéder au nœud DOM sous chaque objet jQuery avec la méthode .get(). Nous pouvons ensuite interroger ce nœud DOM pour accéder/définir directement différentes propriétés.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
// <p/>`);
});
Vous pouvez voir la démonstration de travail de ce code ci-dessous.
Décomposons ce code. (Veuillez consulter les fichiers HTML et CSS joints pour mieux comprendre le code.)
Nous sélectionnons un bouton pour déclencher l’événement check et lui attachons un callback sur l’événement click. Dans le rappel, nous affichons le résultat de la vérification en l’ajoutant comme texte à un élément p ; nous utilisons la méthode jQuery .html().
Notez que cette méthode jQuery écrase le texte précédent, ce qui est notre cas d’utilisation souhaité ici. Nous voulons une nouvelle sortie HTML pour chaque nouvelle vérification.
La logique de vérification principale se trouve dans la ligne que nous passons à la méthode .html(). Nous sélectionnons d’abord tous les éléments d’entrée avec name = 'checkboxArray' dans un objet jQuery.
Notez que le sélecteur ne renvoie qu’un objet jQuery et que nous n’avons pas encore accès au nœud DOM sous-jacent.
Mais nous enchaînons ensuite la méthode .get , comme ceci - .get(0). Nous avons maintenant accès au premier nœud DOM de la collection jQuery sélectionnée.
Nous allons vérifier si la première case est cochée, et ainsi nous accédons au premier nœud DOM en passant 0 comme argument à la méthode .get().
Nous pouvons maintenant accéder directement à la propriété .checked de jQuery pour vérifier si la case à cocher est sélectionnée.
Conseil de pro 1 :
La propriété .checked à laquelle nous accédons ci-dessus est la propriété JavaScript attachée au nœud DOM (ou, techniquement, la propriété IDL). Il est différent de l’attribut HTML checked qui n’affiche que la valeur initiale ou par défaut cochée/décochée de l’élément HTML (techniquement la propriété de contenu HTML).
Nous examinerons cette différence en détail plus loin dans cet article de blog.
Astuce de pro 2 :
Les opérations DOM directes sont super rapides. Ainsi, cette méthode permet d’utiliser jQuery pour vérifier si la case est cochée avec des performances supérieures.
Raccourci Vérifier si la case à cocher est cochée avec les opérations DOM directes à l’aide de l’opérateur de déréférencement
Chaque jQuery se comporte comme un objet tableau. Nous pouvons donc nous en tenir à ce comportement et réduire du code en utilisant l’opérateur de déréférencement de tableau court [] au lieu de la méthode .get.
$("button").on("click",function(){
$("p").html(`<p>
// ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
// <p/>`);
});
Le code est le même que ci-dessus sauf l’utilisation de l’opérateur de déréférencement : ... $("input[name = 'checkboxArray']")[0]... .
Vérifiez si la case à cocher est cochée avec la méthode .prop()
Nous pouvons également utiliser la méthode jQuery .prop() pour extraire les propriétés JavaScript sous-jacentes des éléments au lieu d’accéder directement au nœud DOM.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
<p/>`);
});
Vous pouvez voir la démonstration de travail de ce code ci-dessous.
La plupart du code est similaire à ce qui précède. Regardons la ligne avec la différence clé, c’est-à-dire :
$("input[name='checkboxArray']").prop('checked')...
Nous extrayons la même propriété .checked ci-dessus, mais utilisons ici la méthode jQuery .prop().
Conseil de pro :
Pourquoi utiliser la méthode jQuery .prop() ? La méthode jQuery .prop() est également une opération rapide (par rapport à la méthode basée sur un sélecteur que nous verrons ensuite).
Il est recommandé d’interroger les propriétés des éléments DOM avec des bibliothèques JavaScript ou JS telles que jQuery.
Vérifiez si la case à cocher est cochée avec la méthode .is()
Nous combinons le sélecteur :checked avec la méthode .is() pour utiliser jQuery pour vérifier si la case est cochée.
Le sélecteur :checked renvoie tous les éléments sélectionnés ou cochés. Pour les cases à cocher, cela signifie qu’il sélectionne les cases qui sont cochées.
$("some selector:checked");
// returns those elements that are checked
Vous pouvez en savoir plus sur le sélecteur :checked ici.
La méthode .is() compare un objet jQuery à un sélecteur et renvoie true s’il correspond à ce sélecteur.
$("some jQuery object").is("some_selector");
//returns true if the jQuery object matches the selector
Vous pouvez en savoir plus sur la méthode .is() ici.
Combinons les deux en un seul code pour vérifier si la case à cocher est cochée avec jQuery.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
<p/>`);
});
Regardez la démo de cette méthode ci-dessous.
Le code pour configurer le gestionnaire d’événements et le rappel est similaire aux méthodes précédentes. Le principal changement réside dans la mise en œuvre de la vérification, comme suit :
$("input[id = '#first']").is(":checked")...
La méthode .is() renvoie true si la case à cocher avec le premier identifiant est cochée car nous lui passons le sélecteur :checked comme argument.
Conseil de pro :
La méthode is() ne crée pas un nouvel objet jQuery ou ne modifie pas l’objet d’origine en place. Ce comportement le rend idéal pour une utilisation dans les rappels et les gestionnaires d’événements.
Cas d’utilisation courants pour vérifier si la case à cocher est cochée avec jQuery
Maintenant que nous avons vu les méthodes de base, construisons quelques scripts rapides prêts à l’emploi pour les cas d’utilisation courants.
Vérifiez si la case est cochée à l’aide de l’ID de l’élément
Nous pouvons effectuer la vérification en utilisant l’ID de l’élément avec le code suivant :
$("button").on("click",function(){
$("p").html(`<p>
${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
<p/>`);
});
Nous sélectionnons la case à cocher avec l’ID second en utilisant l’attribut égal au sélecteur, en passant l’option id='#second'.
Vous pouvez voir la démonstration de travail ci-dessous.
Vérifiez si la case à cocher est cochée à l’aide de la classe
Nous pouvons également sélectionner un groupe de cases à cocher avec une classe commune pour voir si elles sont cochées. Le code est assez simple :
$("button").on("click",function(){
$("p").html(' ');
$("input[class='non-first']").each(function(){
$("p").append(`
${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
<br> `);
});
});
Nous sélectionnons toutes les cases à cocher avec la non-première classe, puis parcourons chacune d’elles avec la méthode .each(). Enfin, nous exécutons la vérification pour chaque itération et ajoutons la sortie à l’élément p.
Notez que nous utilisons la méthode append() pour ce cas d’utilisation, car nous ne voulons pas écraser la sortie de l’itération précédente.
Vous pouvez voir la démonstration de travail ci-dessous :
Décochez la case si coché avec jQuery
Nous utilisons l’extrait de code suivant pour décocher une case si elle est cochée avec jQuery :
$("button").on("click",function(){
// To find the checked boxes by ID
let $checkedBox = $("input[id ='first']");
// To run the check and toggle if the checkbox is checked
if ($checkedBox.is(':checked')){
$checkedBox.prop("checked", false);
}
});
Nous utilisons ici la forme set de la méthode .prop().
$(some_jQuery_object).prop("checked",false);
// sets the "checked" property to false for the selected jQuery object
Vous pouvez voir la démonstration de travail de cet extrait ici :
Vérifiez si toutes les cases à cocher sont cochées avec jQuery
Nous pouvons utiliser le passe-partout suivant pour savoir si toutes les cases à cocher d’une collection donnée sont cochées.
$("button").on("click",function(){
let result = true;
// To find the list of checked boxes in an array of related checkboxes
let $checkedList = $("input[name='checkboxArray']");
// To iterate and do something with each checked box on the list above
// Here we display info related to them in the DOM
$checkedList.each(function(){
if (!($(this).is(":checked"))){
result = false;
}
});
// to display the number of checked boxes
$("p").html(`All checkboxes are ${result?'':'not'} checked`);
});
Vous pouvez voir la démonstration de travail de l’extrait ici :
Décomposons la logique de ce code.
Nous attachons le gestionnaire d’événements comme ci-dessus et parcourons chaque case cochée de la collection. Nous exécutons ensuite la fonction .each() sur chaque case à cocher et changeons la variable résultat en faux si des cases à cocher ne sont pas cochées.
Enfin, nous sortons le résultat.
Vérifiez si une case à cocher est cochée dans la collection donnée avec jQuery
On peut vérifier si au moins une des cases est cochée avec le code suivant :
$("button").on("click",function(){
let result = false;
// To find the list of checked boxes in an array of related checkboxes
let $checkedList = $("input[name='checkboxArray']");
// To iterate and do something with each checked box on the list above
// Here we display info related to them in the DOM
$checkedList.each(function(){
if ($(this).is(":checked")){
result = true;
}
});
// to display if any (at least) one of the checkboxes is checked
$("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});
Voyons d’abord la méthode en action avec la démonstration de travail ci-dessous.
La logique est simple. Nous exécutons la vérification sur chaque case à cocher de la collection, et nous changeons la variable result en true si même une des cases à cocher est cochée.
Sinon, nous gardons la valeur de la variable resultat à false et produisons le message en conséquence.
Désactiver le bouton Soumettre si la case n’est pas cochée avec jQuery
Nous pouvons écrire un simple extrait pour désactiver un bouton d’envoi si une case spécifique n’est pas cochée.
$("button").on("click",function(){
// To find the specific checkbox
let $checkedBox = $("input[id='third']");
let $submitBtn = $("input[name='submitBtn']");
if ($($checkedBox).is(":checked")){
$submitBtn.prop("disabled",false);
}
else {
$submitBtn.prop("disabled",true);
}
});
Vous pouvez voir le résultat de cette solution ci-dessous :
La logique est simple. Nous déterminons si la case à cocher est cochée avec la méthode .is() et le sélecteur :checked, tout comme nos méthodes ci-dessus.
Si la case est cochée, nous définissons la propriété disabled de l’élément submitBtn sur false ; sinon, nous le définissons sur vrai.
Utilisation obsolète de la méthode .attr() pour vérifier si la case à cocher est cochée avec jQuery
Les attributs HTML sont différents des propriétés DOM. Souvent, les propriétés correspondent à l’attribut HTML, mais pas toujours.
Comme dans le cas des cases à cocher, l’attribut HTML coché n’est que l’indicateur de l’état par défaut ou initial coché/décoché de l’élément. Elle ne correspond pas à la propriété DOM cochée, qui indique l’état coché/décoché actuel de l’élément.
La méthode jQuery .attr() référence uniquement les attributs HTML. Donc, vous ne devriez pas utiliser cette méthode pour savoir si la case est cochée.
Vous pouviez le faire avec jQuery plus tôt, mais le comportement a changé dans la version 1.6 lorsque la méthode .prop() a été ajoutée pour accéder explicitement aux propriétés DOM et que .attr() était limité aux seuls attributs HTML.
Vous pouvez lire, en détail, comment jQuery gère différemment les attributs et les propriétés ici.