¿Cómo obtener el valor del botón de opción seleccionado?

Resuelto mkyong asked hace 12 años • 20 respuestas

Tengo un problema extraño con mi programa JS. Esto funcionaba 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>
mkyong avatar Mar 08 '12 20:03 mkyong
Aceptado

Esto funciona con cualquier explorador.

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

Esta es una forma sencilla de obtener el valor de cualquier tipo de entrada. Tampoco es necesario incluir la ruta jQuery.

Giorgos Tsakonas avatar Jul 22 '2014 11:07 Giorgos Tsakonas

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

jsfiddle

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

jbabey avatar Mar 08 '2012 14:03 jbabey
document.forms.your-form-name.elements.radio-button-name.value
imran ansari avatar Jan 29 '2013 10:01 imran ansari

Desde jQuery 1.8, la sintaxis correcta para la consulta es

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

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

jptsetung avatar Jun 04 '2013 15:06 jptsetung