J'ai un problème étrange avec mon programme JS. Je l'ai fait fonctionner correctement, mais pour une raison quelconque, il ne fonctionne plus. Je veux juste trouver la valeur du bouton radio (lequel est sélectionné) et le retourner à une variable. Pour une raison quelconque, il revient sans cesse 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:

<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>

Vous pouvez faire quelque chose comme ça:

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;
  }
}

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

Modifier: Merci HATCHA et jpsetung pour vos suggestions de modification.

Cela fonctionne avec n'importe quel explorateur.

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

Il s'agit d'un moyen simple d'obtenir la valeur de n'importe quel type d'entrée. Vous n'avez également pas besoin d'inclure le chemin jQuery.

document.forms.your-form-name.elements.radio-button-name.value

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

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

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

Version ECMAScript 6

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

La solution la plus simple:

 document.querySelector('input[name=genderS]: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 l'a dit Chips_100, vous devez utiliser:

var sizes = document.theForm[field];

directement sans utiliser la variable de test.

Ancienne réponse:

Tu ne devrais pas evalaimer ça?

var sizes = eval(test);

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

Ceci est du pur JavaScript, basé sur la réponse de @Fontas mais avec un code de sécurité pour renvoyer une chaîne vide (et éviter a 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 <input>type, (b) a un nameattribut de genderS, et (c) est vérifié.
• Ligne 2: s'il existe un tel contrôle, retournez sa valeur. S'il n'y en a pas, retournez une chaîne vide. La genderSRadiovariable est vraie si la ligne 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é, il reviendra undefined.

Au cas où quelqu'un chercherait une réponse et atterrirait ici comme moi, à partir 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

Voici un exemple pour les radios où aucun attribut Vérifié = "vérifié" 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

Voici une bonne façon d'obtenir la valeur du bouton radio coché avec du JavaScript simple:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

Source: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

En utilisant ce HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

Vous pouvez également utiliser Array Find la checkedpropriété pour rechercher l'élément coché:

Array.from(form.elements.characters).find(radio => radio.checked);

À l'aide d'un javascript pur, vous pouvez gérer la référence à l'objet qui a distribué l'événement.

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

supposons que vous ayez besoin de placer différentes rangées de boutons radio dans un formulaire, chacun avec des noms d'attribut séparés ('option1', 'option2' etc.) mais le même nom de classe. Peut-être en avez-vous besoin sur plusieurs lignes où chacun soumettra une valeur basée sur une échelle de 1 à 5 se rapportant à une question. vous pouvez écrire votre javascript comme ceci:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

Je voudrais également insérer la sortie finale dans un élément de formulaire caché à soumettre avec le formulaire.

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

S'il vous est possible d'attribuer un identifiant à votre élément de formulaire (), cette méthode peut être considérée comme une alternative sûre (en particulier lorsque le nom de l'élément de 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:

<form action="#n" name="theForm" id="yourFormId">

 <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 alors utilisez juste

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

Ou

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

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