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

Question 1

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.

Question 2

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

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

Question 3

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();

Question 4

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;
    }
}

Question 5

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.

Question 6

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

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

Question 7

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

Question 8

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/

¿Ha sido útil esta solución?