Cómo obtener el valor del botón de opción seleccionado usando js

Question

Estoy usando este código para obtener el valor del botón de opción actualmente seleccionado, pero no funciona.

var mailcopy = document.getElementById('mailCopy').value; 

¿Cómo obtener el valor actual del botón de opción con Javascript?

Answer 1

Utilice la propiedad element.checked.

Answer 2

var mailcopy = document.getElementById('mailCopy').checked; 

if(mailcopy==true) 
{ 
    alert("Radio Button Checked"); 
} 
else 
{ 
    alert("Radio Button un-Checked"); 
} 

Answer 3

Los botones de radio vienen en grupos que tienen el mismo nombre y diferentes ID, uno de ellos tener la propiedad se establece en true, por lo que un bucle sobre ellas hasta que lo encuentres.

function getCheckedRadio(radio_group) { 
    for (var i = 0; i < radio_group.length; i++) { 
     var button = radio_group[i]; 
     if (button.checked) { 
      return button; 
     } 
    } 
    return undefined; 
} 
var checkedButton = getCheckedRadio(document.forms.frmId.elements.groupName); 
if (checkedButton) { 
    alert("The value is " + checkedButton.value); 
} 

Answer 4

function getCheckedValue(radioObj, name) { 

    for (j = 0; j < radioObj.rows.length; ++j) { 
     for (k = 0; k < radioObj.cells.length; ++k) { 
      var radioChoice = document.getElementById(name + "_" + k); 
      if (radioChoice.checked) { 
       return radioChoice.value; 
      } 
     } 
    } 
    return ""; 
} 

Answer 5

Si está utilizando jQuery, siguiente código trabajará para usted.

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

Answer 6

cheque esta

<input class="gender" type="radio" name="sex" value="male">Male 
<br> 
<input class="gender" type="radio" name="sex" value="female">Female 


<script type="text/javascript"> 
$(document).ready(function() { 
$(".gender").change(function() { 

    var val = $('.gender:checked').val(); 
    alert(val); 
}); 
}); 

</script> 

Example

Answer 7

se puede utilizar este

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

o, para los más vieja versión de jQuery

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

Answer 8

Si puede usar jQuery "Chamika Sandamal" la respuesta es la forma correcta de hacerlo. En el caso de que no se puede usar jQuery que puede hacer algo como esto:

function selectedRadio() { 
    var radio = document.getElementsByName('mailCopy'); 
    alert(radio[0].value); 
} 

Notas:

• En general, para las entradas que desea tener identificadores únicos (no es un requisito, pero una buenas prácticas)
• Todas las entradas de radio que son del mismo grupo deben tener el mismo atributo de nombre, por ejemplo
• hay que establecer el atributo de valor para cada entrada

Aquí es un ejemplo de las radios de entrada:

<input type="radio" name="mailCopy" value="1" />1<br /> 
<input type="radio" name="mailCopy" value="2" />2<br /> 

Answer 9

HTML

<p>Gender</p> 
<input type="radio" id="gender0" name="gender" value="Male">Male<br> 
<input type="radio" id="gender1" name="gender" value="Female">Female<br> 

JS

var gender = document.querySelector('input[name = "gender"]:checked').value; 
document.writeln("You entered " + gender + " for your gender<br>"); 

Answer 10

Una forma más sencilla de hacer esto es utilizar una variable js global que simplemente contiene la identificación del botón de opción cliqueado. Entonces no tiene que perder código girando a través de sus listas de radio buscando el valor seleccionado. He hecho esto en los casos en que tengo una lista generada dinámicamente de 100 o más botones de opción. girar a través de ellos es (casi imperceptible) lento, pero esta es una solución más fácil.

también puede hacer esto con la identificación, pero generalmente solo quiere el valor.

<script> 
var gRadioValue = ''; //global declared outside of function 
function myRadioFunc(){ 
    var radioVal = gRadioValue; 
    // or maybe: var whichRadio = document.getElementById(gWhichCheckedId); 
    //do somethign with radioVal 
} 
<script> 

<input type="radio" name="rdo" id="rdo1" value="1" onClick="gRadioValue =this.value;"> One 
<input type="radio" name="rdo" id="rdo2" value="2" onClick="gRadioValue =this.value;"> Two 
... 
<input type="radio" name="rdo" id="rdo99" value="99" onClick="gRadioValue =this.value;"> 99 

Answer 11

Puesto que usted quiere conseguir que el uso de JavaScript sencillo, puede utilizar el siguiente código de

var val = ''; 
if(document.getElementById('radio1').checked) { 
    val = document.getElementById('radio1').value 
}else if(document.getElementById('radio2').checked) { 
    val = document.getElementById('radio2').value 
} 

Answer 12

Hy, usted tiene que hacerlo de esta manera.

function checkRadio() { 
    if(document.getElementById('user1').checked) { 
     return $('#user1').val(); 
    }else if(document.getElementById('user2').checked) { 
     return $('#user2').val(); 
    } 
} 

Answer 13

Tal vez me está faltando algo aquí, pero ¿no funcionaría el buen viejo estándar JS? Quiero decir:

var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value; 

... que solo es válido, por supuesto, si se ha proporcionado un "valor" para sus elementos de entrada de radio.

<input type="radio" name="radio-group-name" value="red" checked> 
<input type="radio" name="radio-group-name" value="blue"> 

El valor debe ser "rojo" o "azul" en el ejemplo anterior.

Answer 14

Posiblemente no sea la manera más eficiente ... pero he usado una identificación en cada botón de radio (esto es solo porque no lo estoy pasando como una forma real, son solo los campos brutos).

Llamo a una función con un botón, que comprueba cada botón para ver si está marcado. Hace esto usando la función .checked. Si esto se establece en verdadero, puedo cambiar el valor de otra variable.

function createOutput() { 
 
    var order = "in"; 
 
    if (document.getElementById('radio1').checked == true) { 
 
    order = "pre"; 
 
    } else if (document.getElementById('radio2').checked == true) { 
 
    order = "in"; 
 
    } else if (document.getElementById('radio3').checked == true) { 
 
    order = "post"; 
 
    } 
 
    document.getElementById('outputBox').innerHTML = order; 
 
}

<input id="radio1" type="radio" name="order" value="preorder" />Preorder 
 
<input id="radio2" type="radio" name="order" value="inorder" checked="true" />Inorder 
 
<input id="radio3" type="radio" name="order" value="postorder" />Postorder 
 
<button onclick="createOutput();">Generate Output</button> 
 
<textarea id="outputBox" rows="10" cols="50"></textarea>

Hope esto es útil, de alguna manera,

Beanz

Answer 15

Se podría hacer algo muy similar a la respuesta de Beanz, pero en lugar de utilizar los identificadores, clases de uso para reducir la redundancia .

function getSelectedValue() { 
 
    var radioBtns = document.getElementsByClassName("radioBtn"); 
 
    for(var i = 0; i < radioBtns.length; i++){ 
 
    if(radioBtns[i].checked){ 
 
     document.getElementById("output").textContent = radioBtns[i].value; 
 
    } 
 
    } 
 
}

<input class="radioBtn" type="radio" name="order" value="button1" />Button 1<br> 
 
<input class="radioBtn" type="radio" name="order" value="button2" />Button 2<br> 
 
<input class="radioBtn" type="radio" name="order" value="button3" />Button 3<br> 
 
<button onclick="getSelectedValue();">Get Value of Selected Radio</button><br> 
 
<textarea id="output"></textarea>

Answer 16

todos ustedes pueden probar este ejemplo y fácil de entender.

 Name: <input type="text" id="text" class ="input"> 
       <input type="text" id="text1" class ="input"> 
     Gender: <input type="radio" id="m" class="Rm" name="Rmale" value="Male"> 
       <input type="radio" id="f" class="Rm" name="Rfemale" value="Female"> 
     Course: <input type="checkbox" id="math" class="cm" name="Cmath" value="Math"> 
       <input type="checkbox" id="physic" class="cm" name="Cphysic" value="Physic"> 
       <input type="checkbox" id="eng" class="cm" name="Ceng" value="English"> 
     <button type="button" id="b1">show</button> 

// javascript

<script> 
     function getData(input){ 
      return document.getElementById(input).value; 
     } 
     function dataByClassName(st){ 
      var value=document.getElementsByClassName(st) 
      for(var i=0;i < value.length;i++){ 
       if(value[i].checked){ 
        return value[i].value; 
       } 
      } 
     } 
     document.getElementById("b1").onclick = function() 
     { 
      var st={ 
       name : getData("text")+getData("text1"), 
       gender : dataByClassName("Rm"), 
       course : dataByClassName("cm") 
      }; 
      alert(st.name+" "+st.gender+" "+st.course); 
     }; 

    </script>