2010-04-21 20 views
48

Tengo el siguiente formulario HTML y puede tener muchas casillas de verificación. Cuando se hace clic en el botón Enviar, quiero que el usuario obtenga una alerta de JavaScript para marcar al menos una casilla de verificación si no está marcada ninguna. ¿Hay una manera fácil de hacer esto usando Jquery?Jquery - compruebe si al menos una casilla de verificación está marcada

<form name = "frmTest" id="frmTest"> 
    <input type="checkbox" value="true" checked="true" name="chk[120]"> 
    <input type="checkbox" value="true" checked="true" name="chk[128]"> 
    <input type="checkbox" name="chk[130]"> 
    <input type="checkbox" name="chk[143]"> 
    <input type="submit" name="btnsubmit" value="Submit"> 
</form> 
+3

Probablemente sería mejor con ''. Tenga en cuenta también que el ** solo ** valor aceptable para el atributo marcado está "marcado". 'checked =" true "' es un error. – Quentin

Respuesta

29
$('#frmTest input:checked').length > 0 
+0

$ ('# frmTest: checkbox'). Length> 0 sería mejor marcar entre una cierta cantidad de casillas de verificación. – Kasturi

+1

¿Por qué los botones de radio serían mejores? Si el OP quiere * al menos * una opción seleccionada, los botones de radio lo limitarían a uno * como máximo *. –

+1

@David, eliminé esa sugerencia. –

17
$("#frmTest").submit(function(){ 
    var checked = $("#frmText input:checked").length > 0; 
    if (!checked){ 
     alert("Please check at least one checkbox"); 
     return false; 
    } 
}); 
82
if(jQuery('#frmTest input[type=checkbox]:checked').length) { … } 
+1

: checked ya devuelve un booleano, por lo que no se necesita .length. true.length y false.length ambos proporcionan undefined – Jan

+12

@Jan - 'jQuery ('# frmTest input [type = checkbox]: checked')' devuelve un objeto jQuery que contiene todos los elementos que coinciden con el selector. No devuelve un booleano. Puede confundirlo con 'HTMLInputElement.checked'. – Quentin

4
$('#frmTest').submit(function(){ 
    if(!$('#frmTest input[type="checkbox"]').is(':checked')){ 
     alert("Please check at least one."); 
     return false; 
    } 
}); 

se (': marcado') devolverá verdadero si al menos una o más de las casillas de verificación están activadas.

+0

¿Es posible que esto verifique los clics de la casilla de verificación en vivo? – Robert

+0

Sí, pero utilizaría un controlador de eventos diferente. Ver esto: http://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling – namklabs

7
$("#show").click(function() { 
    var count_checked = $("[name='chk[]']:checked").length; // count the checked rows 
     if(count_checked == 0) 
     { 
      alert("Please select any record to delete."); 
      return false; 
     } 
     if(count_checked == 1) { 
      alert("Record Selected:"+count_checked); 

     } else { 
      alert("Record Selected:"+count_checked); 
      } 
}); 
+0

¿No funciona para mí, algo cambió en la forma en que jQuery maneja el evento marcado casilla de verificación? – Envayo

0

$('#fm_submit').submit(function(e){ 
 
    e.preventDefault(); 
 
    var ck_box = $('input[type="checkbox"]:checked').length; 
 
    
 
    // return in firefox or chrome console 
 
    // the number of checkbox checked 
 
    console.log(ck_box); 
 

 
    if(ck_box > 0){ 
 
     alert(ck_box); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name = "frmTest[]" id="fm_submit"> 
 
    <input type="checkbox" value="true" checked="true" > 
 
    <input type="checkbox" value="true" checked="true" > 
 
    <input type="checkbox" > 
 
    <input type="checkbox" > 
 
    <input type="submit" id="fm_submit" name="fm_submit" value="Submit"> 
 
</form> 
 
<div class="container"></div>

+0

Se corrigieron algunos errores tipográficos para que funcione la demostración. –

Cuestiones relacionadas