Comment obtenir la valeur du bouton radio sélectionné à l'aide de JavaScript?

Les boutons radio sont l'un des éléments les plus cruciaux de HTML lorsque vous essayez de construire une forme. Les boutons radio offrent à l'utilisateur quelques options à partir desquelles il ne peut choisir qu'une seule option.

Normalement, lorsque nous voulons obtenir la valeur d'un élément à partir d'une page Web HTML, nous utilisons simplement la propriété de valeur de cet élément en JavaScript. Mais nous ne pouvons pas faire ça avec des boutons radio. La raison en est que ce n'est pas une bonne pratique de récupérer les valeurs des boutons radio individuels. Par conséquent, nous ne voulons qu'une seule valeur et c'est du bouton radio sélectionné

Le processus de récupération de la valeur d'un bouton radio sélectionné comprend les étapes suivantes:

• Premièrement: obtenez une référence au groupe de boutons radio dans JavaScript
• Deuxièmement: à partir de la liste des boutons radio, filtrez celui avec le «vérifié" propriété
• Troisième: Obtenez l'attribut de valeur du bouton radio filtré

Créons un exemple pour présenter ces étapes.

Étape 1: configurer une page Web HTML

Créez une page Web HTML avec les lignes suivantes à l'intérieur:

Qu'aimeriez-vous apprendre?

Guitare

Violon

Cajon

Apprendre

Les choses suivantes se produisent dans le code mentionné ci-dessus:

• Nous créons un conteneur dans lequel nous allons mettre nos boutons radio et le bouton «Apprendre»
• Ensuite, nous demandons à l'utilisateur l'instrument qu'il veut apprendre
• Les choix sont donnés sous la forme de boutons radio
• Chaque bouton radio a son propre identifiant et valeur Mais la même chose nom pour les regrouper
• Puis un La balise est ajoutée pour chaque bouton radio
• Un bouton a été ajouté dans la page Web, pour soumettre le choix de l'utilisateur.

Fixez la page Web HTML et vous obtiendrez cette sortie sur votre navigateur.

Nous avons des boutons radio et notre bouton d'apprentissage au milieu de la page Web.

Étape 2: Écrivez le code JavaScript pour afficher le choix de l'utilisateur

Nous voulons exécuter une fonction dans le fichier de script en cliquant sur «Apprendre" bouton. Par conséquent, nous ajoutons les lignes suivantes:

document.GetElementByid ("apprendre").onClick = function ()
// Le code suivant viendrait en elle
;

À l'intérieur de cette fonction, obtenez la référence DOM de notre groupe de boutons radio en utilisant la ligne suivante

var radiobuttongroup = document.getElementsByName ("instrument");

Après cela, filtrez ce groupe de boutons radio pour trouver celui qui est vérifié et le stocker dans une autre variable en utilisant la ligne suivante

var checkedradio = tableau.de (radiobuttongroup).trouver ((radio) => radio.vérifié);

Enfin, invitez l'utilisateur sur l'instrument qu'il veut apprendre en utilisant la fonction d'alerte

alert ("Vous avez sélectionné:" + Checkedradio.valeur);

Le fichier de script complet ressemble à ceci

document.GetElementByid ("apprendre").onClick = function ()
var radiobuttongroup = document.getElementsByName ("instrument");
var checkedradio = tableau.de (radiobuttongroup).trouver(
(radio) => radio.vérifié
));
alert ("Vous avez sélectionné:" + Checkedradio.valeur);
;

Étape 3: Tester le script

Actualisez la page Web, sélectionnez un bouton radio, puis cliquez sur le bouton qui indique "Apprendre". Vous devriez obtenir la sortie suivante:

Vous avez réussi à récupérer la valeur à partir d'un bouton radio coché et a alerté l'utilisateur de son choix.

Conclure

Pour obtenir la valeur d'un bouton radio sélectionné en JavaScript, nous devons suivre un ensemble d'étapes. La première étape consiste à obtenir une référence JavaScript aux boutons radio avec le même nom. Après cela, nous voulons filtrer le bouton radio qui a la propriété vérifiée marquée. Après cela, utilisez le bouton Radio Store pour obtenir la valeur en utilisant l'attribut de valeur de l'élément HTML. Alors vous pouvez travailler avec la valeur récupérée.