Cómo obtener el valor de un botón de radio seleccionado

8 minutos de lectura

Avatar de usuario de ZombieBatman
ZombiBatman

Quiero obtener el valor seleccionado de un grupo de botones de opción.

Aquí está mi HTML:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>

Aquí está mi código JavaScript:

var rates = document.getElementById('rates').value;
var rate_value;
if(rates == 'Fixed Rate'){
    rate_value = document.getElementById('r1').value;

}else if(rates == 'Variable Rate'){
    rate_value = document.getElementById('r2').value;

}else if(rates == 'Multi Rate'){
    rate_value = document.getElementById('r3').value;
}

document.getElementById('results').innerHTML = rate_value;

sigo recibiendo indefinido.

  • No estás usando jQuery aquí, pero si alguna vez quisieras, podrías usar esto: $("input[type='radio'][name='rate']:checked").val();

    – GJK

    5 de abril de 2013 a las 16:48

  • ¿Por qué no puedes inspeccionar ese objeto? De todos modos necesitas usar .checked

    – Amol M. Kulkarni

    5 de abril de 2013 a las 16:52

  • posible duplicado de obtener el valor seleccionado del botón de opción en caso de acción

    – IR A 0

    23 de julio de 2013 a las 10:52

  • No estoy seguro de si es necesario o no, pero es un buen hábito poner botones de radio en <form></form> envase.

    – Kamil

    17 de enero de 2016 a las 12:27

  • Posible duplicado de Cómo obtener el valor del botón de opción seleccionado usando js

    – Damjan Pavlica

    26/09/2016 a las 14:40

Avatar de usuario de Parthik Gosar
Parthik Gosar

Esto funciona en IE9 y superior y en todos los demás navegadores.

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

  • Por supuesto, tendría que verificar si querySelector devuelve nulo. Este es el caso si no se marca ningún botón de opción.

    – Roberto

    3 de febrero de 2014 a las 8:20


  • @KamranAhmed: Su solución jQuery tiene un costo mucho mayor.

    usuario1106925

    31 de diciembre de 2014 a las 20:21

  • ParthikGosar: IE8 no es compatible con :checked selector.

    usuario1106925

    31 de diciembre de 2014 a las 20:26

  • Tenga en cuenta que las comillas alrededor rate no son necesarios.

    – bombomb007

    23 de abril de 2015 a las 16:38

  • @KamranAhmed hasta que ya menos que pueda perfilar lo anterior y/o inspeccionar la implementación detrás de la llamada, no puede decir más sobre el rendimiento de lo anterior de lo que puede decir sobre cualquier otro oneliner que llama código nativo. No tenemos suficiente información para especular cómo el navegador logra localizar :checked elemento(s) — tal vez tiene todo “hash y cache” y es un O(1) operación. A menos que haya creado un perfil para indicar algo como que el tiempo de consulta crece con la cantidad de elementos en la página, o a menos que comprenda el código fuente del navegador detrás de él, no puede saberlo.

    – Armén Michaeli

    25 de junio de 2016 a las 19:03

Avatar de usuario de Joe F.
jose f

var rates = document.getElementById('rates').value;

El elemento de tasas es un div, por lo que no tendrá un valor. Aquí es probablemente donde el undefined viene de

El checked propiedad le dirá si el elemento está seleccionado:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

O

$("input[type="radio"][name="rate"]:checked").val();

  • en jquery seria $("input[name=rate]:checked").val()

    – Kamran Ahmed

    28 de noviembre de 2013 a las 10:31


  • @mzalazar No, cada botón de radio tiene su propia identificación, pero todos tienen el mismo nombre, que es lo que los coloca en un grupo, por lo que si selecciona uno, el otro se deselecciona. Con la respuesta de Kamran Ahmed, puede verificar cuál de los botones de radio en el grupo está seleccionado y obtener solo el valor del seleccionado (marcado).

    – Broco

    04/09/2014 a las 18:21

  • el código de mahdavipanah justo arriba (con [checked]) busca el atributo (es decir, estado inicial). En su lugar, debe utilizar :checkedque busca la propiedad (es decir, estado actual), y que casi siempre es lo que quieres.

    – Hierba Doble

    29 mayo 2018 a las 12:30

  • En Javascript sería document.querySelectorAll("input[name=rate]:checked")[0].value

    – Vicente McNabb

    19 de junio de 2019 a las 5:38

  • En Javascript, no es necesario obtener todo de ellos sin embargo: document.querySelector("input[name=rate]:checked").value.

    – ¿Por qué no Hugo?

    1 de junio de 2020 a las 13:45

Avatar de usuario de Joe
José

Puede obtener el valor utilizando el checked propiedad.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

  • Dado que solo se puede verificar una radio, normalmente esperaría una break o return declaración dentro de la if bloquear para detener pases adicionales a través del bucle. Un punto menor, pero buen estilo.

    – RobP

    27 de mayo de 2015 a las 3:26


  • Esta es la implementación vainilla más limpia para esta pregunta. ¡Prestigio!

    – SeaWarrior404

    21 de marzo de 2019 a las 7:48

Avatar de usuario de Daniel
Daniel

Para ustedes, la gente que vive al límite:

Ahora hay algo llamado Lista de nodos de radio y acceder a su propiedad de valor devolverá el valor de la entrada actualmente marcada. Esto eliminará la necesidad de filtrar primero la entrada ‘marcada’ como vemos en muchas de las respuestas publicadas.

Formulario de ejemplo

<form id="test">
    <label><input type="radio" name="test" value="A"> A</label>
    <label><input type="radio" name="test" value="B" checked> B</label>
    <label><input type="radio" name="test" value="C"> C</label>
</form>

Para recuperar el valor marcado, podría hacer algo como esto:

var form = document.getElementById("test");
alert(form.elements["test"].value);

El JSFiddle para probarlo: http://jsfiddle.net/vjop5xtq/

Tenga en cuenta que esto se implementó en Firefox 33 (todos los demás navegadores principales parecen admitirlo). Los navegadores más antiguos requerirán una polirelleno para RadioNodeList para que esto funcione correctamente.

Avatar de usuario de Beweelam
Beweelam

Si está usando JavaScript sin jQuery, puede usar este comando:

document.querySelector("input[type="radio"][name=rate]:checked").value;

  • ¡Esta respuesta está subestimada pero es la mejor!

    – Tánasis

    19 de febrero de 2022 a las 11:30

  • Perfecto! Funciona bien para situaciones en las que crea dinámicamente botones de radio sobre la marcha y no sabe cuántos botones de radio se crearán.

    – Joseph

    22 de abril de 2022 a las 13:26


  • Eso funciona, podemos simplificarlo más, si está seguro de que el nombre del elemento de entrada document.querySelector("input[name='rate']:checked")

    – Cocina de código

    24 de abril de 2022 a las 2:55

  • Solución excelente y versátil cuando jQuery y otras bibliotecas no están en uso y no desea agregar la sobrecarga.

    – Observador de políticas

    14 dic 2022 a las 16:35

Avatar de usuario de Malathy
malathy

El que funcionó para mí se proporciona a continuación en api.jquery.com.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

La variable selectedOption contendrá el valor del botón de radio seleccionado (es decir) o1 o o2

  • ¡Esta respuesta está subestimada pero es la mejor!

    – Tánasis

    19 de febrero de 2022 a las 11:30

  • Perfecto! Funciona bien para situaciones en las que crea dinámicamente botones de radio sobre la marcha y no sabe cuántos botones de radio se crearán.

    – Joseph

    22 de abril de 2022 a las 13:26


  • Eso funciona, podemos simplificarlo más, si está seguro de que el nombre del elemento de entrada document.querySelector("input[name='rate']:checked")

    – Cocina de código

    24 de abril de 2022 a las 2:55

  • Solución excelente y versátil cuando jQuery y otras bibliotecas no están en uso y no desea agregar la sobrecarga.

    – Observador de políticas

    14 dic 2022 a las 16:35

Otra opción (aparentemente más antigua) es usar el formato: “document.nameOfTheForm.nameOfTheInput.value;” p.ej documento.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}
<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Puede hacer referencia al elemento por su nombre dentro de un formulario. Sin embargo, su HTML original no contiene un elemento de formulario.

Violín aquí (funciona en Chrome y Firefox):
https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

  • Este es el formato DOM heredado mucho más antiguo y realmente no debería usarse más, ya que está limitado a ciertos elementos y no sigue el ritmo de los estándares actuales.

    – j08691

    27 de febrero de 2015 a las 14:50

  • @ j08691 Ah, está bien, gracias por avisarme. Esta es una de las cosas que aprendí en una clase de la Universidad. Probablemente sea mejor no confiar en nada de allí y simplemente usar referencias en línea en su lugar.

    – JHS

    27 de febrero de 2015 a las 14:56

  • “… no sigue el ritmo de los estándares actuales”. no es un argumento convincente. Por favor elabora. Si funciona, funciona. También son menos líneas que la respuesta aceptada lo que solo determina si la opción seleccionada es ‘Tarifa Fija’.

    – ceros y unos

    17/03/2015 a las 19:45

  • El violín anterior no parece funcionar con el navegador Safari (7.1.4). El valor se muestra como indefinido, cambiar los estados de los botones de opción no afecta eso.

    – Stuart R. Jefferys

    24/03/2015 a las 19:50

  • Sí, esto tampoco funciona con el navegador Edge (40.15063.0.0). Si se desaprobaron de esta manera, parece extraño, porque esta forma es más simple y tiene sentido ya que los botones de radio se agrupan por su naturaleza. La mayoría de las otras respuestas parecen estar marcando casillas de verificación.

    – Michael K.

    19/09/2017 a las 19:38

¿Ha sido útil esta solución?