close

Travailler avec les checkbox en JavaScript

#1 Introduction open

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 open

Avec cette propriété, vous pouvez, en JavaScript, lire ou forcer l'état "coché" ou "décoché" du checkbox.

  1. Prenez Sublime Text et créez un fichier checkbox.html sur votre bureau.
  2. Tapez !>(form>input[type=checkbox])+script + TAB.
  3. Au niveau JavaScript, déclarez une variable elt et affectez-la à un querySelector() sur l'input.
  4. Faites un concole.log() de la propriété checked.
  5. 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).
  6. Ouvrez la console JavaScript, et constatez que la valeur de checked est false lorsque le checkbox est décoché.
Tester le code
  1. Maintenant, au niveau HTML, ajoutez l'attribut checked à l'input (sans lui donner de valeur).
  2. Exécutez une nouvelle fois le script et constatez que, à présent, la propriété checked est true.
Tester le code
  1. Maintenant, vous allez forcer l'état du checkbox, non pas en HTML, mais en JavaScript. Au niveau HTML, supprimez l'attribut checked.
  2. Au niveau JavaScript, affectez la propriété checked à true.
  3. Exécutez le script et constatez que, le checkbox est coché.
Tester le code

#3 La propriété value open

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.
  1. Prenez Sublime et faites un console.log() de value.
  2. Exécutez et constatez l'affichage dans la console de la chaîne 'on'.
Tester le code
  1. Prenez Sublime et au niveau HTML, ajoutez l'attribut value. Mettez-lui la valeur 'OK'.
  2. Exécutez et constatez l'affichage dans la console de la chaîne 'OK'.
Tester le code