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

Quiero obtener el valor seleccionado de un grupo de botones de radio.

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

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

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

El elemento de tasas es a div, por lo que no tendrá un valor. Esto es probablemente de donde undefinedviene el.

La checkedpropiedad le dirá si el elemento está seleccionado:

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

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

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

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, personas que viven al límite:

Ahora hay algo llamado RadioNodeList y el acceso a su propiedad de valor devolverá el valor de la entrada actualmente verificada. 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, puede 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 requerirán un polfyill para RadioNodeListque esto funcione correctamente

El que funcionó para mí se muestra 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 opción seleccionado (es decir) o1 u o2

Otra opción (aparentemente más antigua) es usar el formato: "document.nameOfTheForm.nameOfTheInput.value;" eg document.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.

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

Use document.querySelector ('input [tipo = radio]: marcado'). Value; para obtener el valor de la casilla seleccionada, puede utilizar otros atributos para obtener el valor como nombre = género etc., por favor pasar por debajo de fragmento de código sin duda lo hará útil para usted,

Solución

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Gracias

CÓDIGO HTML:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

CODIGO JQUERY:

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

$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

Conseguirás

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

En Javascript podemos obtener los valores mediante el uso de Id " getElementById()" en el código anterior que ha publicado que contiene el nombre, no el Id, para que pueda modificarlo así

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

use este valor de tasa de acuerdo con su código

Ha pasado más o menos un año desde que se hizo la pregunta, pero pensé que era posible una mejora sustancial de las respuestas. Considero que este es el script más fácil y versátil, porque verifica si se ha verificado un botón y, de ser así, cuál es su valor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

También puede llamar a la función dentro de otra función, como esta:

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
} 

Suponiendo que la myFormvariable a continuación se refiere a su elemento de formulario y que sus botones de radio comparten el nombre "my-radio-button-group-name", lo siguiente es puro JavaScript y cumple con los estándares (aunque no lo he verificado para que esté disponible en todas partes ):

myForm.elements.namedItem("my-radio-button-group-name").value

Lo anterior arrojará el valor de un elemento de botón de opción marcado (o seleccionado, como también se le llama), si lo hay, o de lo nullcontrario. El quid de la solución es la namedItemfunción que funciona específicamente con los botones de opción.

Consulte HTMLFormElement.elements , HTMLFormControlsCollection.namedItem y especialmente RadioNodeList.value , ya que namedItem generalmente devuelve un RadioNodeListobjeto.

Utilizo MDN porque permite rastrear el cumplimiento de las normas, al menos en gran medida, y porque es más fácil de comprender que muchas publicaciones WhatWG y W3C.

llamar directamente a un botón de radio muchas veces le da el valor del PRIMER botón, no el botón COMPROBADO. en lugar de recorrer los botones de radio para ver cuál está marcado, prefiero llamar a una onclickfunción de JavaScript que establezca una variable que luego se pueda recuperar a voluntad.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

que llama:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

Una ventaja adicional es que puedo tratar datos y / o reaccionar a la comprobación de un botón (en este caso, habilitar el botón ENVIAR).

Una mejora a las funciones sugeridas anteriores:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

Mi opinión sobre este problema con javascript puro es encontrar el nodo marcado, encontrar su valor y sacarlo de la matriz.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

Tenga en cuenta que estoy usando funciones de flecha . Vea este violín para un ejemplo de trabajo.

Si está utilizando jQuery:

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

Puede usar .find()para seleccionar el elemento marcado:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

luego...

var rate_value = rates.rate.value;

verificar el valor por ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

Usé la función jQuery.click para obtener el resultado deseado:

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

Espero eso ayude.

Si los botones tienen el formato
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector anterior, es una mejor solución. Sin embargo, este método es fácil de entender, especialmente si no tienes ni idea sobre CSS. Además, es muy probable que los campos de entrada estén en forma de todos modos.
No comprobé, hay otras soluciones similares, perdón por la repetición

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

no puede obtener valores de un botón de radio como ese en su lugar usar

rate_value = document.getElementById('r1').value;

Si está utilizando el JQuery, utilice el fragmento de abajo para el grupo de botones de radio.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();

Simplemente use: document.querySelector('input[rate][checked]').value

También puede recorrer los botones con forEach-loop en los elementos

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

https://codepen.io/anon/pen/YQxbZJ

El HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

El JS

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

En php es muy fácil la
página html

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

Tomar valor de forma a php

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}