Cómo obtener el valor de un botón de opción seleccionado
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 sin definirme .
Esto funciona en IE9 y superiores y en todos los demás navegadores.
document.querySelector('input[name="rate"]:checked').value;
var rates = document.getElementById('rates').value;
El elemento de tarifas es a div, por lo que no tendrá valor. Probablemente undefinedde aquí venga esto.
La checkedpropiedad 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();
Puede obtener el valor utilizando la checkedpropiedad.
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;
}
}
Para ustedes que viven al límite:
Ahora hay algo llamado RadioNodeList y al acceder a su propiedad de valor se devolverá el valor de la entrada marcada actualmente. 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, puedes hacer algo como esto:
var form = document.getElementById("test");
alert(form.elements["test"].value);
El JSFiddle para demostrarlo: 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 necesitarán un polyfill para RadioNodeListque esto funcione correctamente.
