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

saber si se ha pulsado un boton javascript

Question

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

Answer 1

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, para empezar, debes tenerlos sin marcar.

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

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

Answer 2

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 las cosas de izquierda a derecha.

input[name=gender]:checked

1. input limita a las etiquetas de entrada.
2. [name=gender] limita a etiquetas con el nombre género dentro del grupo anterior.
3. :checked limita a las 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 checked="checked" .

Answer 3

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 puedes comprobar los botones utilizando:

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

Answer 4

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)

Answer 5

Dar botones de radio, mismo nombre pero diferentes identificaciones.

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

Answer 6

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

Answer 7

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>

Answer 8

Esto sería válido para los 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 de verificación marcadas compartiendo un nombre:

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

Answer 9

Esto también funciona, evitando llamar a un ID de elemento pero llamándolo usando un elemento de matriz.

El siguiente código se basa en el hecho de que una matriz, denominada como el 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;
}

Answer 10

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

Answer 11

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/

Answer 12

Los scripts en esta página me ayudaron a crear el siguiente script, 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 siguiente formulario de prueba:

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

La secuencia de comandos RadioValidator se asegurará de que se haya dado una respuesta para ''test1'' y ''test2'' antes de enviarse. Puede tener tantos grupos de radio en el formulario, que ignorará cualquier otro elemento del formulario. Todas las respuestas de radio que faltan 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 bienvenidos :)

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

Answer 13

Puedes usar este simple script. Es posible que tenga 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.
}

Answer 14

Si desea un JavaScript de vainilla, no desea saturar su marca agregando ID en cada botón de opción, y solo se preocupa por los navegadores modernos , el siguiente enfoque funcional es un poco más de buen gusto para mí 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 no se marca ninguno, se devolverá undefined (aunque podría cambiar la línea de arriba para devolver otra cosa, por ejemplo, para que se devuelva false , puede cambiar la línea relevante de arriba a: }).pop() || {value:false}).value; }).pop() || {value:false}).value; ).

También existe un enfoque de polyfill con visión de futuro, ya que la interfaz RadioNodeList debería facilitar el uso de una propiedad de value en la lista de elementos de radio secundarios de formulario (que se encuentran en el código anterior como formElement[radioName] ), pero eso tiene sus propios problemas. : ¿Cómo hacer un polyfill de RadioNodeList?

Answer 15

Solo quiero asegurarme de que algo sea ​​seleccionado (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;
}

Answer 16

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 necesidad real de jQuery aquí, querySelectorAll es ampliamente compatible ahora.

Edición: corregí un error con el selector css, he incluido las citas, aunque puedes omitirlas, en algunos casos no puedes, así que es mejor dejarlas.

Answer 17

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

Answer 18

Una manera de JavaScript de vainilla

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

Answer 19

Vamos a pretender 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 marca, pero eso debería ser suficiente para comenzar.

Si solo está buscando para ver si algún botón de opción está seleccionado en alguna parte de la página, PrototypeJS hace muy fácil.

Aquí hay una función que devolverá verdadero si al menos un botón de opción está seleccionado en algún lugar de la página. De nuevo, esto podría necesitar ser ajustado dependiendo de 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 la validación de Javascript!) , Dependerá del idioma que elija, pero verificará el valor de gender de la cadena de solicitud.

Answer 20

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

Answer 21

sólo una pequeña modificación de 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 comprobar si el botón de opción 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>

Answer 22

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

Answer 23

Tenga en cuenta este comportamiento con jQuery al obtener los 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() ); 

});

Así que $(''input[name="myRadio"]'').val() no devuelve el valor comprobado de la entrada de radio, como es de esperar: devuelve el valor del primer botón de opción.

Answer 24

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