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

JQuery

Annonces Google