Comment cocher une case à cocher en jQuery ou JavaScript ?
JavaScript et jQuery fournissent des méthodes permettant de modifier l'état d'une case à cocher pour pouvoir la cocher / décocher à volonté.
Il arrive dans un site internet qu'il soit nécessaire de cocher soi-même une case plutôt que de laisser l'internaute le faire. JavaScript et la bibliothèque jQuery fournissent des méthodes permettant de modifier l'état d'une case à cocher pour pouvoir la cocher / décocher à volonté (Lire aussi l'astuce : Comment aligner les cases à cocher (checkboxes) et leur label quel que soit le navigateur ?).
La méthode pour changer l'état d'une case à cocher consiste à modifier sa propriété checked. Celle-ci indique si la case est cochée ou non. Il est possible de le faire en JavaScript car la propriété checked est gérée dans le DOM :
<input type=checkbox id=caseACocher/> document.getElementById(caseACocher).checked = true; //Coche la case à cocher document.getElementById(caseACocher).checked = false; //Décoche la case à cocher
JQuery permet également de modifier l'attribut HTML de la case à cocher. Pour cela, on utilise la méthode attr(), qui permet de modifier la valeur d'un attribut, et la méthode removeAttr() qui supprime l'attribut dont le nom est en paramètre. Une case à cocher possède l'attribut checked dont la valeur est égale à checked :
$(#caseACocher).attr(checked, checked); //Méthode pour cocher la case à cocher $(#caseACocher).removeAttr(checked); //Méthode pour décocher la case à cocher
Ces méthodes existent pour toutes les versions de jQuery mais agir sur l'attribut HTML de la case à cocher ne fonctionne pas dans tous les cas. En effet, lorsque l'internaute a déjà modifié l'état de la case à cocher, ces méthodes ne fonctionnent plus. Il est donc conseillé de modifier la propriété JavaScript de l'objet plutôt que son attribut, à moins que l'on ne soit sûr que l'internaute ne va pas interagir avec la case à cocher.
La version 1.6 de jQuery a ajouté la méthode prop() qui permet de modifier n'importe quelle propriété : $(#caseACocher).prop(checked, true); //Méthode pour cocher la case $(#caseACocher).prop(checked, false); //Méthode pour décocher la case