¿Cómo puedo verificar si un botón de opción está seleccionado con JavaScript?

Tengo dos botones de radio dentro de un formulario HTML. Aparece un cuadro de diálogo cuando uno de los campos es nulo. ¿Cómo puedo verificar si se ha seleccionado un botón de opción?

Supongamos que tienes HTML como este

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

Para la validación del lado del cliente, aquí hay algunos Javascript para verificar cuál está seleccionado:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Lo anterior podría hacerse más eficiente dependiendo de la naturaleza exacta de su marcado, pero eso debería ser suficiente para comenzar.

Si solo está buscando ver si se ha seleccionado algún botón de radio en cualquier lugar de la página, PrototypeJS lo hace muy fácil.

Aquí hay una función que devolverá verdadero si se selecciona al menos un botón de radio en algún lugar de la página. Una vez más, es posible que esto deba modificarse según su HTML específico.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Para la validación del lado del servidor (recuerde, ¡no puede depender completamente de Javascript para la validación!) , Dependería de su idioma de elección, pero solo verificaría el gendervalor de la cadena de solicitud.

Con jQuery , sería algo así como

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Déjame dividirlo en pedazos para cubrirlo más claramente. jQuery procesa cosas de izquierda a derecha.

input[name=gender]:checked

1. input lo limita a las etiquetas de entrada.
2. [name=gender] lo limita a etiquetas con el nombre género dentro del grupo anterior.
3. :checked lo limita a casillas de verificación / botones de radio que están seleccionados dentro del grupo anterior.

Si desea evitar esto por completo, marque uno de los botones de opción como marcado ( checked="checked") en el código HTML, lo que garantizaría que siempre se seleccione un botón de opción .

Una manera vainilla de JavaScript

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

Solo trato de mejorar la solución de Russ Cam con un poco de azúcar selector de CSS incluido con el JavaScript de vainilla.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

No hay una necesidad real de jQuery aquí, querySelectorAll es ampliamente compatible ahora.

Editar: solucioné un error con el selector css, he incluido las comillas, aunque puede omitirlas, en algunos casos no puede, por lo que es mejor dejarlas.

código HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Código Javascript:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Puedes usar este sencillo script. Puede tener varios botones de opción con los mismos nombres y valores diferentes.

var checked_gender = document.querySelector('input[name = "gender"]:checked');

if(checked_gender != null){  //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}

Los guiones de esta página me ayudaron a encontrar el guión a continuación, que creo que es más completo y universal. Básicamente, validará cualquier número de botones de radio en un formulario, lo que significa que se asegurará de que se haya seleccionado una opción de radio para cada uno de los diferentes grupos de radio dentro del formulario. Por ejemplo, en el formulario de prueba a continuación:

   <form id="FormID">

    Yes <input type="radio" name="test1" value="Yes">
    No <input type="radio" name="test1" value="No">

    <br><br>

    Yes <input type="radio" name="test2" value="Yes">
    No <input type="radio" name="test2" value="No">

   <input type="submit" onclick="return RadioValidator();">

El script RadioValidator se asegurará de que se haya dado una respuesta tanto para 'test1' como para 'test2' antes de enviar. Puede tener tantos grupos de radio en el formulario e ignorará cualquier otro elemento del formulario. Todas las respuestas de radio faltantes se mostrarán dentro de una sola ventana emergente de alerta. Aquí va, espero que ayude a la gente. Cualquier corrección de errores o modificaciones útiles son bienvenidas :)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("FormID").elements;
    for (i = 0; i < AllFormElements.length; i++) 
    {
        if (AllFormElements[i].type == 'radio') 
        {
            var ThisRadio = AllFormElements[i].name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions[x].checked && ThisChecked == 'No')
                 {
                     ThisChecked = 'Yes';
                     break;
                 } 
            }   
            var AlreadySearched = ShowAlert.indexOf(ThisRadio);
            if (ThisChecked == 'No' && AlreadySearched == -1)
            {
            ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
            }     
        }
    }
    if (ShowAlert != '')
    {
    alert(ShowAlert);
    return false;
    }
    else
    {
    return true;
    }
}
</SCRIPT>

Tenga en cuenta este comportamiento con jQuery al obtener valores de entrada de radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Por $('input[name="myRadio"]').val()lo tanto , no devuelve el valor verificado de la entrada de radio, como es de esperar, devuelve el valor del primer botón de radio.

Con mootools ( http://mootools.net/docs/core/Element/Element )

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

Esta es una función de utilidad que he creado para resolver este problema

    //define radio buttons, each with a common 'name' and distinct 'id'. 
    //       eg- <input type="radio" name="storageGroup" id="localStorage">
    //           <input type="radio" name="storageGroup" id="sessionStorage">
    //param-sGroupName: 'name' of the group. eg- "storageGroup"
    //return: 'id' of the checked radioButton. eg- "localStorage"
    //return: can be 'undefined'- be sure to check for that
    function checkedRadioBtn(sGroupName)
    {   
        var group = document.getElementsByName(sGroupName);

        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).id;
            } else if (group[0].type !== 'radio') {
                //if you find any in the group not a radio button return null
                return null;
            }
        }
    }

Esto sería válido para botones de radio que comparten el mismo nombre, no se necesita JQuery.

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

Si estamos hablando de casillas de verificación y queremos una lista con las casillas marcadas compartiendo un nombre:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

solo una pequeña modificación a Mark Biek;

CÓDIGO HTML

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

y código Javascript para verificar si el botón de radio está seleccionado

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Hay una forma muy sofisticada de validar si alguno de los botones de radio está marcado con ECMA6 y el método .some().

HTML:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

Y javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedserá truesi alguno de los botones de radio está marcado y falsesi ninguno de ellos está marcado.

Devuelve todos los elementos marcados en el botón de radio

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

Con JQuery, otra forma de verificar el estado actual de los botones de opción es obtener el atributo 'verificado'.

Por ejemplo:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

En este caso, puede verificar los botones usando:

if ($("#gender_male").attr("checked") == true) {
...
}

Este código alertará al botón de radio seleccionado cuando se envíe el formulario. Usó jQuery para obtener el valor seleccionado.

$("form").submit(function(e) {
  e.preventDefault();
  $this = $(this);

  var value = $this.find('input:radio[name=COLOR]:checked').val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="COLOR" id="Rojo" type="radio" value="red">
  <input name="COLOR" id="Azul" type="radio" value="blue">
  <input name="COLOR" id="Amarillo" type="radio" value="yellow">
  <br>
  <input type="submit" value="Submit">
</form>

Solía operador propagación y algunos para comprobar menos un elemento de la matriz pasa la prueba.

Comparto por quien se preocupe.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender"  value="Female" / >

Aquí está la solución que se amplía para no seguir adelante con el envío y enviar una alerta si los botones de opción no están marcados. ¡Por supuesto, esto significaría que tienes que desmarcarlos para empezar!

if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
  alert ("You must select a button");
  return false;
}

Solo recuerde configurar la identificación ('radio1', 'radio2' o como se llame) en el formulario para cada uno de los botones de radio o el script no funcionará.

Un ejemplo:

if (!checkRadioArray(document.ExamEntry.level)) { 
    msg+="What is your level of entry? \n"; 
    document.getElementById('entry').style.color="red"; 
    result = false; 
} 

if(msg==""){ 
    return result;  
} 
else{ 
    alert(msg) 
    return result;
} 

function Radio() { 
    var level = radio.value; 
    alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.") 
} 

function checkRadioArray(radioButtons) { 
    for(var r=0;r < radioButtons.length; r++) { 
        if (radioButtons[r].checked) { 
            return true; 
        } 
    } 
    return false; 
} 

La forma

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

La secuencia de comandos

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

El violín: http://jsfiddle.net/PNpUS/

Solo quiero asegurarme de que algo se seleccione (usando jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}

Si desea JavaScript vainilla, no desea saturar su marcado agregando ID en cada botón de opción , y solo se preocupa por los navegadores modernos , el siguiente enfoque funcional me resulta un poco más sabroso que un bucle for:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

Si ninguna de las dos está marcada, volverá undefined(aunque podría cambiar la línea de arriba para devolver otra cosa, por ejemplo, para que se falsedevuelva, podría cambiar la línea relevante de arriba a:) }).pop() || {value:false}).value;.

También existe el enfoque prospectivo de polyfill ya que la interfaz RadioNodeList debería facilitar el uso de una valuepropiedad en la lista de elementos de radio secundarios de formulario (que se encuentra en el código anterior como formElement[radioName]), pero eso tiene sus propios problemas: cómo polyfill RadioNodeList ?

Esto también está funcionando, evitando llamar a una identificación de elemento pero llamándolo usando como un elemento de matriz.

El siguiente código se basa en el hecho de que una matriz, denominada grupo de botones de radio, está compuesta por elementos de botones de radio en el mismo orden en que se declararon en el documento html:

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

JAVAScript:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}

Proporcione botones de radio, el mismo nombre pero diferentes ID.

var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
  //condition
  final_answer = verified1;
}
else
{
  if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
    //condition
    final_answer = verified2;
   }
   else
   {
     return false;
   }
}