
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.html
sur votre bureau. - Tapez
!>(form>input[type=checkbox])+script
+TAB
. - Au niveau JavaScript, déclarez une variable
elt
et 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
checked
estfalse
lorsque 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 maintenant la propriété
checked
esttrue
.
- 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
value
qui 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
value
est 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'
.