Comment puis-je obtenir efficacement la valeur d'un bouton radio sélectionné en JavaScript ?

Accè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!