Travailler avec les checkbox en JavaScript
#1
Introduction
Pour faire ce tutoriel, des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Si vous avez besoin, vous avez un tutoriel dans la partie HTML-CSS de ce site ici. De plus, si vous avez fait les tutoriels JavaScript sur le DOM, cette partie devrait vous paraître assez facile.
#2
La propriété checked
Avec cette propriété, vous pouvez, en JavaScript, lire ou forcer l'état "coché" ou "décoché" du checkbox.
- Prenez Sublime Text et créez un fichier
checkbox.htmlsur votre bureau. - Tapez
!>(form>input[type=checkbox])+script+TAB. - Au niveau JavaScript, déclarez une variable
eltet affectez-la à unquerySelector()sur l'input. - Faites un
concole.log()de la propriétéchecked. - Avec Sublime, faites un Open In Browser pour exécuter le fichier dans le navigateur. (Prenez plutôt Chrome pour que l'on fasse la même chose).
- Ouvrez la console JavaScript, et constatez que la valeur de
checkedestfalselorsque le checkbox est décoché.
- Maintenant, au niveau HTML, ajoutez l'attribut
checkedà l'input(sans lui donner de valeur). - Exécutez une nouvelle fois le script et constatez que, à présent, la propriété
checkedesttrue.
- Maintenant, vous allez forcer l'état du checkbox, non pas en HTML, mais en JavaScript. Au niveau HTML, supprimez l'attribut
checked. - Au niveau JavaScript, affectez la propriété
checkedàtrue. - Exécutez le script et constatez que, le checkbox est coché.
#3
La propriété value
La propriété JavaScript value correspond évidemment à l'attribut HTML value. Il y a deux choses à se souvenir concernant value.
- La première, c'est que c'est la valeur de
valuequi est transmise au serveur, si le checkbox est coché (Si le checkbox n'est pas coché, rien n'est transmis au serveur). - La deuxième, c'est que la valeur par défaut de
valueest la chaîne de caractères'on'. Donc si vous ne touchez pas àvalue(ni en HTML ni en JavaScript) et que le checkbox est coché, c'est'on'qui est transmis au serveur.
- Prenez Sublime et faites un
console.log()devalue. - Exécutez et constatez l'affichage dans la console de la chaîne
'on'.
- Prenez Sublime et au niveau HTML, ajoutez l'attribut
value. Mettez-lui la valeur'OK'. - Exécutez et constatez l'affichage dans la console de la chaîne
'OK'.
