Comment obtenir la valeur du bouton radio sélectionné?

J’ai un problème étrange avec mon programme JS. Je travaillais correctement mais pour une raison quelconque, cela ne fonctionnait plus. Je veux juste trouver la valeur du bouton radio (lequel est sélectionné) et le ramener à une variable. Pour une raison quelconque, il continue à revenir undefined .

Voici mon code:

 function findSelection(field) { var test = 'document.theForm.' + field; var sizes = test; alert(sizes); for (i=0; i < sizes.length; i++) { if (sizes[i].checked==true) { alert(sizes[i].value + ' you got a value'); return sizes[i].value; } } } 

submitForm :

 function submitForm() { var genderS = findSelection("genderS"); alert(genderS); } 

HTML:

 
Male Female

Search

JavaScript:

 var radios = document.getElementsByName('genderS'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value); // only one radio can be logically checked, don't check the rest break; } } 

http://jsfiddle.net/Xxxd3/610/

Edit: Merci HATCHA et jpsetung pour vos suggestions d'édition.

Cela fonctionne avec n’importe quel explorateur.

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

C’est la manière la plus pure d’obtenir la valeur de n’importe quel type d’entrée. Vous n’avez pas besoin d’inclure jQuery dans votre chemin également.

Depuis jQuery 1.8, la syntaxe correcte de la requête est

 $('input[name="genderS"]:checked').val(); 

Not $('input[@name="genderS"]:checked').val(); plus, qui travaillait dans jQuery 1.7 (avec le @ ).

La solution la plus simple:

  document.querySelector('input[name=genderS]:checked').value 
 document.forms.your-form-name.elements.radio-button-name.value 

Version ECMAScript 6

 let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value; 

Essaye ça

 function findSelection(field) { var test = document.getElementsByName(field); var sizes = test.length; alert(sizes); for (i=0; i < sizes; i++) { if (test[i].checked==true) { alert(test[i].value + ' you got a value'); return test[i].value; } } } function submitForm() { var genderS = findSelection("genderS"); alert(genderS); return false; } 

Un violon ici .

Edit: Comme dit par Chips_100, vous devriez utiliser:

 var sizes = document.theForm[field]; 

directement sans utiliser la variable de test.


Vieille réponse:

Ne devrais-tu pas faire comme ça?

 var sizes = eval(test); 

Je ne sais pas comment ça fonctionne, mais pour moi, vous ne faites que copier une chaîne.

Si quelqu’un cherchait une réponse et atterrit ici comme moi, de Chrome 34 et Firefox 33, vous pouvez faire ce qui suit:

 var form = document.theForm; var radios = form.elements['genderS']; alert(radios.value); 

ou plus simple:

 alert(document.theForm.genderS.value); 

réfrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Ceci est du pur JavaScript, basé sur la réponse de @Fontas mais avec un code de sécurité pour retourner une chaîne vide (et éviter une TypeError ) s’il n’y a pas de bouton radio sélectionné:

 var genderSRadio = document.querySelector("input[name=genderS]:checked"); var genderSValue = genderSRadio ? genderSRadio.value : ""; 

Le code se décompose comme ceci:

  • Ligne 1: obtenez une référence au contrôle qui (a) est un type , (b) un atsortingbut name de genderS et (c) est coché.
  • Ligne 2: S’il existe un tel contrôle, renvoyez sa valeur. S’il n’y en a pas, retournez une chaîne vide. La variable genderSRadio est véridique si Line 1 trouve le contrôle et null / falsey si ce n’est pas le cas.

Pour JQuery, utilisez la réponse de @ jbabey et notez que s’il n’y a pas de bouton radio sélectionné, celui-ci ne sera undefined .

Voici un exemple pour les radios où aucun atsortingbut Checked = “checked” n’est utilisé

 function test() { var radios = document.getElementsByName("radiotest"); var found = 1; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { alert(radios[i].value); found = 0; break; } } if(found == 1) { alert("Please Select Radio"); } } 

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Cliquez sur Rechercher sans sélectionner de radio ]

Source: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

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

Supposons que vous deviez placer différentes lignes de boutons radio dans un formulaire, chacun avec des noms d’atsortingbuts distincts (‘option1’, ‘option2’, etc.) mais avec le même nom de classe. Vous en avez peut-être besoin dans plusieurs lignes où ils soumettront chacun une valeur basée sur une échelle de 1 à 5 concernant une question. vous pouvez écrire votre javascript comme suit:

  

Je voudrais également insérer le résultat final dans un élément de formulaire masqué à soumettre avec le formulaire.

En utilisant un javascript pur, vous pouvez gérer la référence à l’object qui a dissortingbué l’événement.

 function (event) { console.log(event.target.value); } 

S’il vous est possible d’atsortingbuer un identifiant à votre élément de formulaire (), cette méthode peut être considérée comme une méthode alternative sûre (en particulier lorsque le nom de l’élément du groupe radio n’est pas unique dans le document):

 function findSelection(field) { var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input"); alert(formInputElements); for (i=0; i < formInputElements.length; i++) { if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) { alert(formInputElements[i].value + ' you got a value'); return formInputElements[i].value; } } } 

HTML:

 
      

etc alors utilisez juste

  $("#rdbExamples:checked").val() 

Ou

  $('input[name="rdbExampleInfo"]:checked').val(); 
  var value = $('input:radio[name="radiogroupname"]:checked').val();