Travailler avec des radio boutons 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

  1. Prenez Sublime Text et créez un fichier radio.html sur votre bureau.
  2. Tapez !>(form>input[type=radio])+script + TAB.
  3. Déclarez une variable elt et affectez-la à un querySelector() sur l'input.
  4. Faites un console.log() de la propriété checked.
  5. Constatez que la propriété checked est false.
Tester le code
  1. Maintenant, vous allez cocher le bouton radio au niveau du HTML en ajoutant l'attribut checked.
  2. Exécutez à nouveau le script, et constatez que la propriété checked a maintenant la valeur true.
Tester le code

#3 La propriété value open

  1. Maintenant, ce que l'on va faire, c'est un vrai groupe de bouton radio de manière que cela ait un sens. Pour cela, ajoutez un attribut name avec la valeur 'choix'.
  2. Ajouter un attribut value avec la valeur 0.
  3. Dupliquez 2 fois la ligne puis supprimez le checked sauf au deuxième radio. Arrangez les valeurs de value pour avoir 0, 1, 2.
  4. Au niveau JavaScript, changez le querySelector() en querySelectorAll() pour récupérer tous les input.
  5. Ajoutez un s à elt de manière à avoir elts comme nom de variable. Le pluriel nous indique que c'est un tableau. Une pratique qui améliore la lisibilité.
  6. Maintenant, on va parcourir le tableau. Faites une boucle for sur elts.
  7. Dans la boucle, insérez un if pour tester si le checked courant est true. Si c'est le cas, c'est celui qui est coché. Par construction, il ne peut y en avoir d'autre, donc on sort de la boucle.
  8. Affichez avec un console.log() la valeur de la propriété value du radio qui correspond à l'indice en sortie de la boucle.
Tester le code
  1. Si vous voulez améliorer un peu, et pouvoir afficher le radio qui est coché à chaque changement, vous pouvez mettre un gestionnaire d'événement. Le mieux est de le mettre sur un parent des trois radio. Ici, vous allez le mettre sur le formulaire. Vous faites un querySelector() sur le form et vous lui mettez un addEventListener() sur l'événement change.
  2. Enfin dans la fonction du gestionnaire, vous placez votre boucle de parcours des input.
Tester le code

Politique de confidentialité

Mentions Légales