Comment prendre les entrées avec les boutons radio en javascript

JavaScript est un langage de programmation qui donne à nos applications Web et à nos pages Web la possibilité de penser et d'agir en les rendant interactifs. JavaScript propose des boutons radio américains utilisés pour configurer un groupe d'options connexes avec un seul bouton radio choisi à la fois. Les boutons radio sont principalement utilisés dans les formes et utilisés avec l'élément de HTML. Les boutons radio sont très utiles lorsque le développeur souhaite que l'utilisateur ne sélectionne qu'une seule option parmi les options multiples données.

Par exemple, votre application Web accepte l'e-mail ou le numéro de téléphone et vous souhaitez que l'utilisateur en sélectionne un et non les deux. Les boutons radio sont utiles pour atteindre cette tâche. Tout d'abord, nous définirons les boutons radio en HTML, puis nous allons vers JavaScript afin que nous puissions prendre les entrées avec les boutons radio.

Html

Choisissez votre option préférée

E-mail

Téléphone

Dans le code HTML ci-dessus, nous avons utilisé deux boutons radio et avons donné le nom du contact. Il est nécessaire de donner le même nom au même groupe de boutons radio afin qu'un seul puisse être sélectionné en même temps. Nous avons également utilisé des étiquettes pour étiqueter nos boutons de radio d'entrée. Nous verrons la sortie suivante dans notre navigateur lorsque nous exécuterons le code ci-dessus:

Nous pouvons également voir qu'un seul bouton radio peut être sélectionné à un moment donné. Avant d'aller vers la partie JavaScript, lançons également une soumission dans HTML afin que nous puissions plus tard écouter des événements sur ce bouton.

Choisissez votre option préférée

E-mail

Téléphone
Soumettre

Nous avons lancé un bouton et lui avons donné un événement OnClick afin que lorsque l'utilisateur clique sur le soumettre bouton, la fonction handleclick () commencera à exécuter. En fin de compte, nous avons fait référence à notre nom de fichier JavaScript avec l'aide de scénario Tag et en utilisant le SRC L'attribut a passé le nom de fichier qui est code.js.

Javascrip

Maintenant que nous avons défini deux boutons radio dans HTML, passons à l'étape suivante pour obtenir les entrées du bouton radio, il est donc nécessaire de déterminer d'abord quel bouton radio est actif ou sélectionné. À cette fin, nous utiliserons QuerySelectorall () qui sélectionnera tous les boutons radio avec le nom de nom.

functionhandleclick ()
constradiobuttons = document.queySelectorall ('input [name = "contact"]');
LetselectedValue;
pour (CONSTRBOFRADIOBUTTONS)
si (RB.vérifié)
SelectedValue = RB.valeur;
casser;


if (selectedValue)
alerte (selectedValue);

autre
alert ("Veuillez sélectionner une option");

Dans le javascript ci-dessus, la fonction handleclick () est créée au début qui est appelée à partir du HTML soumettre bouton. Après cela, en utilisant le queySelectorall (”input [name =” contact ”]”) Nous sélectionnons tous les boutons radio qui ont le nom du contact et enregistrer la référence de tous les boutons radio dans la variable radiobuttons. Après quoi, nous avons créé une boucle qui iratera sur chaque bouton radio et vérifiera si un bouton radio est vérifié ou non, ce qui signifie que le bouton radio est sélectionné ou non. Si un bouton radio est sélectionné, il stockera la valeur de ce bouton radio dans le VALAGE SELECT variable.

Une fois la boucle terminée, nous unifions l'instruction if / else qui vérifie si la variable sélectionnée est vide ou non. S'il a une certaine valeur, il alertera cette valeur, sinon une alerte de Veuillez sélectionner une option sera montré à l'utilisateur.

Nous pouvons voir dans la sortie ci-dessus que lorsque nous n'avons pas sélectionné un bouton radio, l'alerte nous a montré le message qui Veuillez sélectionner une option. Cependant, lorsque nous sélectionnons le E-mail bouton radio, nous voyons la valeur de l'e-mail et lorsque nous sélectionnons le Téléphone Bouton radio puis nous voyons la valeur du téléphone.

Conclusion

Pour configurer un groupe d'options connexes et sélectionner une seule fois à un moment donné, les boutons radio sont utilisés. Les boutons radio sont initiés avec <entrée> éléments de HTML et du vérifié la propriété est utilisée dans JavaScript pour voir si un bouton radio a été sélectionné ou non. Les boutons radio sont très utiles lorsqu'il existe plusieurs options disponibles et que le développeur souhaite que l'utilisateur en sélectionne un. Dans cet article, nous apprenons à prendre des entrées avec les boutons radio dans JavaScript.