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 maintenant 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