


Comment puis-je obtenir efficacement la valeur d'un bouton radio sélectionné en JavaScript ?
Dec 14, 2024 pm 10:13 PMAccès à la valeur du bouton radio en JavaScript
Lorsque vous travaillez avec des entrées de bouton radio en JavaScript, il est essentiel de récupérer la valeur de l'option sélectionnée. Cependant, rencontrer des problèmes avec de telles implémentations peut être frustrant. Examinons un problème courant et sa solution.
Problème
Considérez l'extrait de code suivant :
function findSelection(field) { var test = 'document.theForm.' + field; var sizes = test; for (i=0; i < sizes.length; i++) { if (sizes[i].checked==true) { return sizes[i].value; } } }
Malgré son objectif, ce code renvoie systématiquement « non défini » lors de la tentative d'accès au bouton radio sélectionné value.
Solution
Pour résoudre ce problème, nous pouvons exploiter une approche moderne en utilisant la méthode querySelector() :
document.querySelector('input[name="genderS"]:checked').value;
Cette ligne du code récupère la valeur du bouton radio sélectionné en utilisant le sélecteur :checked dans querySelector() méthode.
Avantages
Cette solution offre plusieurs avantages :
- Compatibilité avec les navigateurs :Cette méthode fonctionne de manière transparente sur divers navigateurs Web.
- Simplicité : C'est une approche concise et simple qui élimine le besoin de boucles ou d'itérateurs complexes.
- Dynamique : Il sélectionne dynamiquement le bouton radio coché, quelle que soit sa position dans le DOM.
Mise en œuvre
HTML :
<form action="#n" name="theForm"> <label for="gender">Gender: </label> <input type="radio" name="genderS" value="1" checked> Male <input type="radio" name="genderS" value="0" > Female<br><br> <a href="javascript: submitForm()">Search</a> </form>
JavaScript :
function submitForm() { var gender = document.querySelector('input[name="genderS"]:checked').value; alert(gender); }
Remarque : Vous vous n'avez pas besoin d'inclure un chemin jQuery dans cette implémentation.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément

Plugins JS de manipulation de 5 premiers

10 vaut la peine de vérifier les plugins jQuery

jQuery Ajouter une barre de défilement à div

10 Ajax / jQuery Tutoriels / plugins assortis
