jQuery est un framework Javascript qui peut simplifier le codage Javascript pour un site Web et supprime de nombreux problèmes de compatibilité entre navigateurs. Hier, j’ai regardé comment obtenir et définir des valeurs d’éléments de formulaire avec jQuery, mais je n’ai pas traité de cases à cocher. L’article d’aujourd’hui montre comment savoir si une case à cocher de formulaire HTML est cochée ou non avec jQuery, puis comment la changer pour qu’elle ne soit pas cochée.
Exemple de formulaire
Notre exemple de formulaire ressemble à ceci:
<input type="checkbox" name="foo" value="bar" /><input type="button" onclick="show_checked()" value="Show" /><input type="button" onclick="set_checked(true)" value="On" /><input type="button" onclick="set_checked(false)" value="Off" />
Il y a une case à cocher avec le nom « foo », puis trois boutons. Le premier appelle une fonctionpour nous montrer si la case à cocher est cochée ou non, et les deux seconds la changent d’être cochée à ne pas être cochée.
Vérifiez si la case à cocher est cochée
Il existe plusieurs façons de savoir si une case à cocher est cochée ou non avec jQuery, et voici quelques alternatives. Chacun retournera true s’il est vérifié ou false si ce n’est pas le cas.
$('input').is(':checked')$('input').attr('checked')
Définissez la case à cocher sur cochée ou non cochée
Le statut de la case à cocher peut être modifié en utilisant la fonction attr() comme ceci, pour cocher la case:
$('input').attr('checked', true);
et comme pour décocher la case:
$('input').attr('checked', false);
Exemple de travail
Et enfin, voici l’exemple de formulaire en action:
Une note sur les valeurs booléennes
Il y a une discussion dans les commentaires ci-dessous sur les problèmes rencontrés avec Chromium qui peuvent être liés à la transmission de valeurs de chaîne true et false alors qu’il doit s’agir strictement d’une valeur booléenne true ou false sinon des conséquences inattendues peuvent se produire.
Il a été suggéré d’utiliser.removeAttr() à la place, mais cela peut avoir d’autres conséquences de ma lecture des commentaires sur la page de documentation jQuery pour la fonction. Je vais suivre ce post à une date ultérieure et faire plus de tests pour confirmer à coup sûr
Basculer une case à cocher lorsque vous cliquez sur une étiquette
Notez que Javascript n’est pas nécessaire pour basculer une case à cocher lorsque vous cliquez sur du texte; c’est à cela que servent les HTML <label >. Lisez mon article de suivi en utilisant HTML< label> pour basculer et sélectionner des champs pour plus d’informations.