Obtenez la valeur de bouton radio avec Javascript

J'ai un problème étrange avec mon programme JS. J'ai travaillé correctement mais pour une raison quelconque, cela ne fonctionne plus. Je veux simplement trouver la valeur du bouton radio (lequel est sélectionné) et le renvoyer à une variable. Pour une raison quelconque, il continue de revenir indéfini. 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; } } } 

soumettre le formulaire:

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

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> 

    JQuery:

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

    http://jsfiddle.net/Xxxd3/609/

    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 le moyen le plus simple d'obtenir la valeur de tout type d'entrée. Vous ne devez pas non plus inclure jQuery dans votre chemin.

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

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

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

    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 l'a dit Chips_100, vous devez utiliser:

     var sizes = document.theForm[field]; 

    Directement sans utiliser la variable de test.


    Ancienne réponse:

    Ne devrais-tu pas comme ça?

     var sizes = eval(test); 

    Je ne sais pas comment cela fonctionne, mais pour moi, vous ne copiez qu'une chaîne.

    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; 

    Voici un exemple pour les radios où aucun attribut 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

    C'est un JavaScript pur, basé sur la réponse de @Fontas mais avec le code de sécurité pour renvoyer une chaîne vide (et éviter un 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 selon lequel (a) est un type <input> , (b) possède un attribut de 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, renvoyez une chaîne vide. La variable genderSRadio est vraie si Line 1 trouve le contrôle et null / falsey si ce n'est pas le cas.

    Pour JQuery, utilisez la réponse @ jbabey, et notez que s'il n'y a pas de bouton radio sélectionné, il reviendra undefined .

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

    Dans le cas où quelqu'un cherchait une réponse et atterri ici comme moi, depuis Chrome 34 et Firefox 33, vous pouvez effectuer les opérations suivantes:

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

    Ou plus simple:

     alert(document.theForm.genderS.value); 

    Refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

    En utilisant un javascript pur, vous pouvez gérer la référence à l'objet qui a envoyé l'événement.

     function (event) { console.log(event.target.value); } 
      <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

    Etc, utilisez seulement

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

    Ou

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