Maison > interface Web > js tutoriel > Comment obtenir la valeur d'un bouton radio sélectionné en JavaScript ?

Comment obtenir la valeur d'un bouton radio sélectionné en JavaScript ?

Susan Sarandon
Libérer: 2024-12-03 12:50:11
original
674 Les gens l'ont consulté

How Do I Get the Value of a Selected Radio Button in JavaScript?

Comment obtenir la valeur d'un bouton radio sélectionné en HTML et JavaScript

Les boutons radio permettent aux utilisateurs de sélectionner une seule option dans un groupe de choix connexes. Récupérer la valeur du bouton radio sélectionné est une tâche courante dans le développement Web.

Problème :

Vous ne parvenez pas à récupérer la valeur sélectionnée à partir d'un groupe de boutons radio en utilisant votre code JavaScript actuel.

Solution :

Pour obtenir la valeur de la radio sélectionnée bouton, vous pouvez utiliser le code amélioré suivant :

const selectedRadio = document.querySelector('input[name="rate"]:checked');

if (selectedRadio) {
  const rateValue = selectedRadio.value;
  document.getElementById('results').innerHTML = rateValue;
}
Copier après la connexion

Explication :

La méthode querySelector() recherche le premier élément du DOM qui correspond au spécifié sélecteur. Dans ce cas, il cible le bouton radio avec l'attribut de nom "rate" et l'attribut vérifié.

Une fois le bouton radio sélectionné obtenu, sa propriété value est récupérée et stockée dans la variable rateValue. Enfin, la propriété innerHTML de l'élément results est définie sur rateValue, affichant efficacement la valeur du bouton radio sélectionné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal