Usar JQuery para verificar si no se ha marcado ningún botón de opción en un grupo


107

Estoy sentado con un problema, necesito verificar con JQuery si no se ha marcado ningún botón de opción dentro de un grupo de botones de opción, para poder dar a los usuarios un error de JavaScript si se olvidaron de marcar una opción.

Estoy usando el siguiente código para obtener los valores.

var radio_button_val = $("input[name='html_elements']:checked").val();

Respuestas:


146
if (!$("input[name='html_elements']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}

17
Esto fallará si el botón de opción marcado tiene un valor = ""
ScottE

1
@ScottE - excelente punto - eliminaré esta respuesta si Roland no la acepta.
Dominic Rodger

Creo que podrías cambiarlo .val() == ""y quitar el !y estarías todo listo.
Doug Neiner

@Doug: ¿no tendría eso todavía el problema que mencionó ScottE? ¿Qué .val()regresaría si el botón de radio marcado lo hubiera hecho value=""? (Aunque supongo que podría argumentar que es un caso bastante improbable).
Dominic Rodger

1
Lo siento, mi comentario fue confuso: quería que toda la prueba se viera así: if ($("input[name='html_elements']:checked").val() == "")lo que alertaría "No se verificó nada"
Doug Neiner

144

Estoy usando

$("input:radio[name='html_radio']").is(":checked")

Y devolverá FALSE si todos los elementos del grupo de radio están desmarcados y TRUE si un elemento está marcado.


3
Esta respuesta me funcionó de manera confiable para verificar si un grupo de botones de opción tenía un valor seleccionado. Mejor respuesta en el hilo.
Andy Cook

1
Tanto la respuesta de Dominic Rodger como la de Jacobo Hernández funcionan bien. Personalmente, trato de nunca usar el NOT (!) Inicial al principio de la línea. Años más tarde, se vuelve difícil de depurar cuando lo pasa por alto y tiene la lógica al revés ... es (": comprobado") es muy claro lo que está haciendo - La mejor respuesta.
Scott

32

Podrías hacer algo como esto:

var radio_buttons = $("input[name='html_elements']");
if( radio_buttons.filter(':checked').length == 0){
  // None checked
} else {
  // If you need to use the result you can do so without
  // another (costly) jQuery selector call:
  var val = radio_buttons.val();
}

2
¿No podrías reducir las dos primeras líneas a solo if ($("input[name='html_elements']:checked").length == 0){?
Powerlord

7
Podría, pero luego necesitaría otra selección completa de jQuery para obtener el valor si mostrara que existía un valor.
Doug Neiner

5
if ($("input[name='html_elements']:checked").size()==0) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}


2
var len = $('#your_form_id input:radio:checked').length;
      if (!len) {
        alert("None checked");
      };
      alert("checked: "+ len);

2

Creo que este es un ejemplo simple, cómo verificar si se verificó una radio en un grupo de radios.

if($('input[name=html_elements]:checked').length){
    //a radio button was checked
}else{
    //there was no radio button checked
} 

0

Estoy usando esto muy simple

HTML

<label class="radio"><input id="job1" type="radio" name="job" value="1" checked>New Job</label>
<label class="radio"><input id="job2" type="radio" name="job" value="2">Updating Job</label>


<button type="button" class="btn btn-primary" onclick="save();">Save</button>

GUIÓN

 $('#save').on('click', function(e) {
    if (job1.checked)
        {
              alert("New Job"); 
        }
if (job2.checked)
        {
            alert("Updating Job");
        }

}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.