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.
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 unO(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
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:checked
que 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
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
oreturn
declaración dentro de laif
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
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.
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
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
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