web-dev-qa-db-fra.com

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

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?

javascripthtmlformsradio-button
58
Propeller

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

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

Ce code sélectionnera l'entrée checked avec gendernom et l'obtiendra value. Simple n'est-ce pas?

démonstration en direct

71
gdoron

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

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

En Javascript pur:

var genders = document.getElementsByName("gender");
var selectedGender;

for(var i = 0; i < genders.length; i++) {
   if(genders[i].checked)
       selectedGender = genders[i].value;
 }

mise à jour

En Javascript pur sans boucle, en utilisant les plus récents (et potentiellement pas encore supportés) RadioNodeList :

var form_elements = document.getElementById('my_form').elements;
var selectedGender = form_elements['gender'].value;

Le seul problème est que RadioNodeList n'est retourné que par le HTMLFormElement.elements ou HTMLFieldSetElement.elements, vous devez donc avoir un identifiant pour le formulaire ou le jeu de champs dans lequel les entrées radio sont encapsulées pour le saisir en premier.

84
Anthony

Pour obtenir la valeur, procédez comme suit:

document.getElementById("genderf").value;

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

document.getElementById("genderf").checked;
8
gideon

Si vous enveloppez vos éléments de formulaire dans une balise de formulaire avec un attribut name, vous pouvez facilement obtenir la valeur à l'aide de 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>
3
Chris Smith

Essayer:


var selectedVal;

for( i = 0; i < document.form_name.gender.length; i++ )
{
  if(document.form_name.gender[i].checked)
    selectedVal = document.form_name.gender[i].value; //male or female
    break;
  }
}
2
Sudhir Bastakoti

Sans boucle:

document.getElementsByName('gender').reduce(function(value, checkable) {
    if(checkable.checked == true) 
        value = checkable.value; 
    return value;
}, '');

reduce n'est qu'une fonction qui alimentera séquentiellement les éléments du tableau en second argument de callback, et renvoyait précédemment fonction à value, tandis que pour la première exécution, il utilisera la valeur de second argument.

Le seul inconvénient de cette approche est que reduction traversera chaque élément retourné par getElementsByName même après qu’il ait trouvé le bouton radio sélectionné.

0
przemo_li