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

316

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.

ZombiBatman
fuente
50
No estás usando jQuery aquí, pero si alguna vez quisiste, puedes usar esto:$("input[type='radio'][name='rate']:checked").val();
GJK
¿Por qué no puedes inspeccionar ese objeto? De todos modos, debes usar.checked
Amol M Kulkarni
No estoy seguro de si eso es necesario o no, pero es una buena costumbre poner botones de radio en el <form></form>contenedor.
Kamil

Respuestas:

239
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;
}
Joe F
fuente
229
En jquery sería$("input[name=rate]:checked").val()
Kamran Ahmed
1
No entiendo, ¿hay dos elementos con la misma ID?
mzalazar
3
@mzalazar No, cada botón de radio tiene su propia ID, pero todos tienen el mismo nombre, que es lo que los coloca en un grupo, por lo que si selecciona uno, el otro se deseleccionará. Con la respuesta de Kamran Ahmed, puede verificar cuál de los botones de radio del grupo está seleccionado y obtener solo el valor del seleccionado (marcado).
Broco
44
El código de mahdavipanah justo arriba (con [checked]) busca el atributo (es decir, el estado inicial). En su lugar :checked, debe usar , que busca la propiedad (es decir, el estado actual), y que casi siempre es lo que desea.
Gras Double
55
En Javascript seríadocument.querySelectorAll("input[name=rate]:checked")[0].value
Vincent McNabb
521

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

document.querySelector('input[name="rate"]:checked').value;
Parthik Gosar
fuente
13
Por supuesto, tendría que verificar si querySelector devuelve nulo. Este es el caso si no se marca ningún botón de radio.
Robert
18
@KamranAhmed: su solución jQuery tiene un costo mucho mayor.
55
ParthikGosar: IE8 no es compatible con el :checkedselector.
14
Tenga en cuenta que las comillas rateno son necesarias.
mbomb007
1
@KamranAhmed hasta que, a 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 otra línea que llame al código nativo. No tenemos suficiente información para especular cómo el navegador se las arregla para ubicar los :checkedelementos, tal vez tiene todo "en hash y en caché" y es una O(1)operación. A menos que lo haya perfilado para indicar que algo así como el tiempo de consulta crece con el número de elementos en la página, o a menos que comprenda el código fuente del navegador detrás de él, no puede saberlo.
amn
144

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;
    }
}
Joe
fuente
13
Dado que solo se puede verificar una radio, normalmente esperaría que una declaración breako returndentro del ifbloque detenga pases adicionales a través del ciclo. Un punto menor, pero de buen estilo.
RobP
1
Esta es la implementación de vainilla más limpia para esta pregunta. ¡Prestigio!
SeaWarrior404
37

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

Daniel
fuente
1
form.elements["test"].valuefunciona muy bien en Chrome [Versión 49.0.2623.87 m].
Evan Hu
Tiene que ser una forma, no se puede usar, por ejemplo, un div. De lo contrario, esto funciona en FF 71.0.
Andrew
16

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

Maldad
fuente
11

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/

JHS
fuente
1
Este es el formato DOM heredado mucho más antiguo y realmente ya no debería usarse, ya que está limitado a ciertos elementos y no sigue el ritmo de los estándares actuales.
j08691
@ j08691 Ah bien, gracias por hacérmelo saber. Esta es una de las cosas que aprendí en una clase universitaria. Probablemente sea mejor no confiar en nada a partir de ahí y solo usar referencias en línea.
JHS
66
"... 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 que solo determina si la opción seleccionada es 'Tarifa fija'.
ceros y unos
El violín anterior no parece funcionar con el navegador Safari (7.1.4). El valor se muestra como indefinido, cambiar los estados del botón de radio no afecta eso.
Stuart R. Jefferys
Sí, esto tampoco funciona con el navegador Edge (40.15063.0.0). Si se desaprobaron de esta manera, parece extraño, porque de esta manera es más simple y tiene sentido ya que los botones de radio están agrupados por su naturaleza. La mayoría de las otras respuestas se ven como si estuvieran marcando casillas de verificación.
mikato
10

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

pawan vedak
fuente
7

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"

fuente
5

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

pradeep
fuente
5

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
    }  
} 
Frank Conijn
fuente
5

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.

amn
fuente
Cuando escribí la respuesta, hojeé las respuestas existentes y no vi nada que se pareciera a lo que quería compartir. Ahora veo que me perdí al menos dos soluciones similares. Aunque, nadie escribió su sugerencia de código usando la sintaxis particular que uso, pero la idea general es la misma. FYI. El punto es obtener la referencia a a RadioNodeListtravés de algo como form.elements[name]o form[name](tal vez, una especulación) o a través de mi sintaxis anterior.
amn
3

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

Tony Gil
fuente
55
En su onchangelugar, debe vincular el evento, en caso de que el usuario use un teclado.
John Dvorak
2

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;
}
Dave
fuente
2

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.

pongi
fuente
Agregaría un tagName === 'INPUT'cheque para asegurarme de que no está trabajando en ninguna otra etiqueta que no sea input.
Aternus
1

Si está utilizando jQuery:

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

Senthil Kumar Thangavel
fuente
1

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
Yukulélé
fuente
1
No conocía Array.find, ¡me encanta! Pero esto se rompería si no se marca ningún elemento.
pongi
0
<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;
usuario7420100
fuente
¿Puedes explicar cómo responde esto a la pregunta?
soundslikeodd
" obtener el valor seleccionado de un grupo de botones de radio ": rates.rate.valuenorates.value
user7420100
Esta es una respuesta correcta. document.getElementById("rates").rate.value[o]document.forms[0].rate.value
Atika
0

verificar el valor por ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;
Nabeel Iqbal
fuente
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.

Animesh Singh
fuente
0

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

Kun Wang
fuente
0
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;
James Cluade
fuente
para obtener los valores de una etiqueta HTML use document.getElementById ('r1'). innerHtml
James Cluade
0

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();
Surendra K
fuente
0

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

mahdavipanah
fuente
No funcionó para mí; ver una sintaxis similar de Pawan arriba que sí. Como en,document.querySelector('input[name = rate]:checked').value
Tim Erickson
0

   var rates=document.getElementsByName("rate");
            for (i = 0; i < rates.length; i++) {
            if (rates[i].checked) {
              console.log(rates[i].value);
              rate=rates[i].value;
              document.getElementById("rate").innerHTML = rate;
              alert(rate);
              
            }
          }
        <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>
        </br>
        <div id='rate'>
        </div>

Bishnu Kumar Roy
fuente
0

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;
        }
    });
Adrian Andersen
fuente
-1

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);`
Anshu
fuente
-2

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/>
}
Kavya Hanumantharaju
fuente