Vérification de la valeur du groupe de boutons radio via JavaScript ?

Question

Cela peut sembler idiot et carrément stupide, mais je n'arrive pas à comprendre comment vérifier la valeur d'un groupe de boutons radio dans mon formulaire HTML via JavaScript. J'ai le code suivant:

 <input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>

Comment récupérer la valeur de gender via JavaScript ?

Answer 1

Utilisez document.querySelector() si vous voulez éviter les frameworks (ce que je veux presque toujours faire).

 document.querySelector('input[name="gender"]:checked').value

Answer 2

Si vous utilisez une bibliothèque javascript comme jQuery, c'est très simple :

 alert($('input[name=gender]:checked').val());

Ce code sélectionnera le checked entrée avec gender le nom et l' obtient de value . Simple n'est-ce pas ?

Démo en direct

Answer 3

Pour obtenir la valeur, vous feriez ceci :

 document.getElementById("genderf").value;

Mais pour vérifier, si le bouton radio est coché ou sélectionné :

 document.getElementById("genderf").checked;

Answer 4

Si vous enveloppez vos éléments de formulaire dans une balise de formulaire avec un attribut de nom, vous pouvez facilement obtenir la valeur en utilisant document.formName.radioGroupName.value.

 <form name="myForm">
    <input type="radio" id="genderm" name="gender" value="male" />
    <label for="genderm">Male</label>
    <input type="radio" id="genderf" name="gender" value="female" />
    <label for="genderf">Female</label>
</form>

<script>
    var selected = document.forms.myForm.gender.value;
</script>