Tengo un problema extraño con mi programa JS. Tenía esto funcionando correctamente, pero por alguna razón ya no funciona. Solo quiero encontrar el valor del botón de opción (cuál está seleccionado) y devolverlo a una variable. Por alguna razón, sigue regresando undefined.

Aquí está mi código:

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>

Puedes hacer algo como esto:

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

Editar: Gracias HATCHA y jpsetung por sus sugerencias de edición.

Esto funciona con cualquier explorador.

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

Esta es una manera simple de obtener el valor de cualquier tipo de entrada. Usted también no necesita incluir el trazado de jQuery.

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

Desde jQuery 1.8, la sintaxis correcta para la consulta es

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

$('input[@name="genderS"]:checked').val();Ya no , que funcionaba en jQuery 1.7 (con la @ ).

Versión ECMAScript 6

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

La solución más simple:

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

Prueba esto

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 violín aquí .

Editar: como dijo Chips_100, debe usar:

var sizes = document.theForm[field];

directamente sin usar la variable de prueba.

Vieja respuesta:

¿No te debería evalgustar esto?

var sizes = eval(test);

No sé cómo funciona, pero para mí solo estás copiando una cadena.

Este es JavaScript puro, basado en la respuesta de @Fontas pero con código de seguridad para devolver una cadena vacía (y evitar a TypeError) si no hay un botón de radio seleccionado:

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

El código se descompone así:

• Línea 1: obtenga una referencia al control de que (a) es un <input>tipo, (b) tiene un nameatributo de genderSy (c) está marcado.
• Línea 2: si existe dicho control, devuelva su valor. Si no lo hay, devuelva una cadena vacía. La genderSRadiovariable es verdadera si la línea 1 encuentra el control y nula / falsa si no lo encuentra.

Para JQuery, use la respuesta de @ jbabey y tenga en cuenta que si no hay un botón de radio seleccionado, volverá undefined.

En caso de que alguien buscara una respuesta y aterrizara aquí como yo, desde Chrome 34 y Firefox 33 puede hacer lo siguiente:

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

o más simple:

alert(document.theForm.genderS.value);

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

Aquí hay un ejemplo para radios donde no se utiliza el atributo Comprobado = "verificado"

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/ [ Haga clic en Buscar sin seleccionar ninguna Radio ]

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

Aquí hay una buena manera de obtener el valor del botón de opción marcado con 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);

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

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

También puede usar Array Buscar la checkedpropiedad para buscar el elemento marcado:

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

Usando un javascript puro, puede manejar la referencia al objeto que despachó el evento.

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

supongamos que necesita colocar diferentes filas de botones de opción en un formulario, cada uno con nombres de atributos separados ('opción1', 'opción2', etc.) pero con el mismo nombre de clase. Quizás los necesite en varias filas donde cada uno enviará un valor basado en una escala de 1 a 5 correspondiente a una pregunta. puedes escribir tu javascript así:

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

También insertaría el resultado final en un elemento de formulario oculto para enviar junto con el formulario.

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

Si es posible que asigne un Id para su elemento de formulario (), esta forma puede considerarse como una alternativa segura (especialmente cuando el nombre del elemento del grupo de radio no es único en el 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"> 

etc, entonces use solo

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

O

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

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