Comment vérifier si un bouton radio est sélectionné avec JavaScript
Les boutons radio, une partie essentielle des formulaires HTML, permettent aux utilisateurs de sélectionner l'une des multiples options. Ils peuvent être créés en utilisant simplement le Tag de type "radio". Les boutons radio sont utilisés dans un groupe de deux boutons ou plus avec un nom commun. Cela facilite les récupérer en un seul objet et vérifier leur statut. Le statut d'un bouton radio peut être vérifié en utilisant deux méthodes différentes qui seront discutées dans cet article.
La première étape de ces deux méthodes est la même pour créer un formulaire contenant des boutons radio:
Configuration d'un formulaire HTML
Nous allons simplement créer une forme HTML simple avec quelques boutons radio:
Choisissez votre couleur préférée
Dans le code ci-dessus, nous avons d'abord utilisé un simple
Tag pour donner un titre afin que l'utilisateur puisse facilement comprendre le but de notre formulaire qui est de choisir une couleur préférée. Nous avons ensuite utilisé le Tag pour créer une forme, à l'intérieur de laquelle nous avons utilisé Tags pour créer trois boutons radio qui offrent différentes options aux utilisateurs.
Nous avons également utilisé le Tags pour étiqueter nos boutons radio. Nous avons ensuite utilisé quelques-uns de
Tags pour nous donner quelques pauses de ligne pour que toute la forme soit belle et uniformément espacée. La forme a été terminée par un Tag qui peut être utilisée pour soumettre notre formulaire. Le appelle le CheckValue () fonction quand il est cliqué.
Nous allons maintenant écrire le code JavaScript pour définir le CheckValue () Fonction pour vérifier quel bouton radio a été sélectionné:
Méthode 1: Utilisation du GetElementsByName ()
Nous pouvons utiliser le .vérifié() propriété pour vérifier si un bouton radio a été sélectionné ou non:
fonction checkValue ()
var radios = document.getElementsByName ("Color");
for (const radio de radios)
if (radio.vérifié)
alerte (radio.valeur + "est votre couleur préférée");
casser;
À l'intérieur de CheckValue () fonction que nous avons d'abord déclaré une variable nommée radios qui reçoit un nodeliste de tous les boutons radio avec la couleur du nom. Nous itérons ensuite sur le nodeliste et vérifier l'état de chaque bouton radio. Si un bouton radio a été sélectionné, nous utilisons le alerte() Méthode pour afficher la couleur sélectionnée.
Le code pour toute la page Web:
Choisissez votre couleur préférée
Si nous voulons vérifier un bouton radio individuel, nous pouvons lui donner un ID unique, puis utiliser le getElementsbyid () Méthode pour le stocker dans une variable. Nous pouvons alors utiliser le vérifié() propriété pour vérifier si le bouton a été choisi.
Méthode 2: Utilisation de la méthode QuerySelectorall ()
Le queySelectorall () La méthode prend un sélecteur CSS comme argument et renvoie un nodeliste de tous les éléments qui correspondent au sélecteur donné:
fonction checkValue ()
var radios = document.queySelectorall ('input [name = "colore"]');
for (const radio de radios)
if (radio.vérifié)
alerte (radio.valeur + "est votre couleur préférée");
casser;
La définition du CheckValue () La fonction est presque la même dans les deux méthodes. La différence est de la méthode qui obtient le nodeliste des boutons radio. La méthode 2 utilise le queySelectorall () Méthode pour obtenir le nodelist.
Choisissez votre couleur préférée
Conclusion
Les boutons radio sont utilisés pour obtenir la préférence de l'utilisateur dans une liste d'options. Des groupes de boutons radio peuvent être formés en donnant la même valeur à leurs attributs de nom. Un seul bouton radio peut être sélectionné à la fois. Ce message concernait la façon dont nous pouvons utiliser JavaScript pour vérifier si un bouton radio est sélectionné.