texto - obtener valor seleccionado select javascript

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

Question

Tengo un problema extraño con mi programa JS. Lo he hecho funcionar correctamente, pero por alguna razón ya no funciona. Solo quiero encontrar el valor del botón de opción (cuál se selecciona) y devolverlo a una variable. Por alguna razón, sigue volviendo 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>

Answer 1

Versión ECMAScript 6

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

Answer 2

Aquí hay un ejemplo para radios donde no se utiliza el atributo 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/ [ Haga clic en Buscar sin seleccionar ninguna radio ]

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

Answer 3

Desde jQuery 1.8, la sintaxis correcta para la consulta es

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

Not $(''input[@name="genderS"]:checked'').val(); más, que estaba funcionando en jQuery 1.7 (con el @ ).

Answer 4

Editar: Como dijo Chips_100, deberías usar:

var sizes = document.theForm[field];

directamente sin usar la variable de prueba.

Respuesta anterior:

¿No deberías eval así?

var sizes = eval(test);

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

Answer 5

En caso de que alguien esté buscando una respuesta y haya aterrizado 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);

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

Answer 6

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

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

El código se descompone así:

• Línea 1: obtener una referencia al control que (a) es un tipo <input> , (b) tiene un atributo name de genderS , y (c) está marcado.
• Línea 2: si existe dicho control, devuelva su valor. Si no lo hay, devuelve una cadena vacía. La variable genderSRadio es veraz si Line 1 encuentra el control y null / falsey si no lo hace.

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

Answer 7

Esto funciona con cualquier explorador.

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

Es la forma más pura de obtener el valor de cualquier tipo de entrada. No es necesario que incluya jQuery en su camino también.

Answer 8

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/

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

Answer 9

La solución más simple:

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

Answer 10

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

Answer 11

Si es posible asignar un Id para su elemento de formulario (), de esta manera se puede considerar como una alternativa segura (especialmente cuando el nombre del elemento de 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">

Answer 12

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

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

Answer 13

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. Tal vez los necesite en varias filas donde cada uno presentará un valor basado en una escala de 1 a 5 relacionada con una pregunta. puedes escribir tu javascript de la siguiente manera:

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

Answer 14

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

Answer 15

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

Answer 16

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

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

O

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

Answer 17

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