Comment utiliser jQuery pour vérifier la propriété checked d'une case à cocher ?
Pour détecter si une case a été cochée en vue ensuite d'effectuer une action, la bibliothèque jQuery fournit des méthodes simples.
Il arrive souvent qu'en JavaScript on cherche à détecter si une case à cocher a été cochée pour pouvoir ensuite effectuer une action (Lire notre autre astuce sur le sujet : Comment aligner les cases à cocher (checkboxes) et leur label quel que soit le navigateur ?).
Pour cela, la bibliothèque JQuery fournit des méthodes simples. Une case à cocher correspond à une balise input de type checkbox (case à cocher) et possède l'attribut checked si celle-ci est cochée :
<input type=checkbox name=caseACocher id=caseACocher/> //Case à cocher décochée <input type=checkbox name=caseACocher id=caseACocher checked=checked/> //Case à cocher cochée
Une case à cocher peut être testée avec la méthode attr qui retourne la valeur de l'attribut HTML.
JQuery(#caseACocher).attr(checked); //Retourne checked, si la case est cochée.
Une autre possibilité est d'utiliser la méthode prop() qui retourne la valeur d'une propriété d'un élément. Pour une case à cocher, la propriété JavaScript checked (à ne pas confondre avec l'attribut HTML), indiquant si la case est cochée, peut être à true ou false :
JQuery(#caseACocher).prop(checked); //Retourne true si la case est cochée, false sinon.
La méthode is() vérifie si un élément ou un sélecteur correspond à la condition passée en paramètre. On peut s'en servir pour vérifier la propriété checked de la case à cocher :
JQuery(#caseACocher).is(:checked); //Retourne true si la case est cochée, false sinon.
On peut également récupérer directement la case à cocher grâce à la méthode get(), qui récupère l'élément dont l'index est désigné en paramètre dans le sélecteur, puis vérifier la propriété checked :
JQuery(#caseACocher).get(0).checked //contient true si la case est cochée, false sinon.