Sto riscontrando qualche strano problema con il mio programma JS. Ho funzionato correttamente, ma per qualche motivo non funziona più. Voglio solo trovare il valore del pulsante di opzione (quale è selezionato) e restituirlo a una variabile. Per qualche motivo continua a tornare undefined.

Ecco il mio codice:

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>

Puoi fare qualcosa del genere:

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

Modifica: grazie a HATCHA e jpsetung per i tuoi suggerimenti di modifica.

Funziona con qualsiasi esploratore.

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

Questo è un modo semplice per ottenere il valore di qualsiasi tipo di input. Inoltre, non è necessario includere il percorso jQuery.

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

Da jQuery 1.8, la sintassi corretta per la query è

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

Non $('input[@name="genderS"]:checked').val();più, che funzionava in jQuery 1.7 (con la @ ).

Versione ECMAScript 6

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

La soluzione più semplice:

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

Prova questo

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 violino qui .

Modifica: come detto da Chips_100 dovresti usare:

var sizes = document.theForm[field];

direttamente senza utilizzare la variabile di test.

Vecchia risposta:

Non ti dovrebbe evalpiacere questo?

var sizes = eval(test);

Non so come funzioni, ma per me stai solo copiando una stringa.

Questo è puro JavaScript, basato sulla risposta di @Fontas ma con codice di sicurezza per restituire una stringa vuota (ed evitare un TypeError) se non è presente un pulsante di opzione selezionato:

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

Il codice si suddivide in questo modo:

• Riga 1: ottenere un riferimento al controllo che (a) è un <input>tipo, (b) ha un nameattributo digenderS e (c) è controllato.
• Riga 2: se esiste un tale controllo, restituisce il suo valore. In caso contrario, restituisce una stringa vuota. La genderSRadiovariabile è true se la riga 1 trova il controllo e null / falsey in caso contrario.

Per JQuery, usa la risposta di @ jbabey e nota che se non c'è un pulsante di opzione selezionato, tornerà undefined.

Nel caso in cui qualcuno stesse cercando una risposta ed è arrivato qui come me, da Chrome 34 e Firefox 33 puoi fare quanto segue:

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

o più semplice:

alert(document.theForm.genderS.value);

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

Ecco un esempio per le radio in cui non viene utilizzato l'attributo Checked = "checked"

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/ [ Fai clic su Trova senza selezionare alcuna radio ]

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

Ecco un bel modo per ottenere il valore del pulsante di opzione selezionato con JavaScript semplice:

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

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

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

È inoltre possibile utilizzare Array Trova la checkedproprietà per trovare l'elemento selezionato:

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

Utilizzando un javascript puro, è possibile gestire il riferimento all'oggetto che ha inviato l'evento.

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

supponiamo che sia necessario inserire diverse righe di pulsanti di opzione in un modulo, ciascuno con nomi di attributo separati ('opzione1', 'opzione2' ecc.) ma lo stesso nome di classe. Forse hai bisogno di loro in più righe in cui ciascuna invierà un valore basato su una scala da 1 a 5 relativa a una domanda. puoi scrivere il tuo javascript in questo modo:

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

Vorrei anche inserire l'output finale in un elemento del modulo nascosto da inviare insieme al modulo.

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

Se è possibile assegnare un ID per l'elemento del modulo (), in questo modo può essere considerato un modo alternativo sicuro (specialmente quando il nome dell'elemento del gruppo radio non è univoco nel documento):

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

ecc. quindi usa solo

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

O

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

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