2010-04-21 20 views
48

Ich habe das folgende HTML-Formular und es kann viele Kontrollkästchen haben. Wenn die Schaltfläche "Senden" angeklickt wird, möchte ich, dass der Benutzer eine JavaScript-Warnung erhält, um mindestens eine Checkbox zu aktivieren, wenn keine ausgewählt ist. Gibt es eine einfache Möglichkeit, dies mit Jquery zu tun?Jquery - überprüfen, ob mindestens ein Kontrollkästchen aktiviert ist

<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

würden Sie wahrscheinlich mit '' besser dran. Beachten Sie auch, dass der ** nur ** akzeptable Wert für das geprüfte Attribut "aktiviert" ist. 'checked =" true "' ist ein Fehler. – Quentin

Antwort

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

$ ('# frmTest: checkbox'). Length> 0 wäre besser unter einer bestimmten Anzahl von Checkboxen zu prüfen. – Kasturi

+1

Warum sollten Radio-Buttons besser sein? Wenn das OP will * mindestens * eine Option ausgewählt Radio-Buttons würde ihn auf ein * höchstens begrenzen *. –

+1

@David, ich habe diesen Vorschlag entfernt. –

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 gibt bereits einen booleschen Wert zurück, also wird .length nicht benötigt. true.length und false.length liefern beide undefined – Jan

+12

@Jan - 'jQuery ('# frmTest input [type = checkbox]: checked')' gibt ein jQuery-Objekt zurück, das alle Elemente enthält, die mit dem Selektor übereinstimmen. Es gibt keinen booleschen Wert zurück. Sie könnten es mit 'HTMLInputElement.checked' verwechseln. – Quentin

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

wird (': checked') wird true zurück, wenn mindestens eine oder mehrere der Kontrollkästchen aktiviert sind.

+0

Ist es möglich, Live Checkbox Klicks zu überprüfen? – Robert

+0

Ja, aber Sie würden einen anderen Event-Handler verwenden. Siehe dies: 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

Funktioniert nicht für mich, etwas in wie jQuery Checkbox checked Ereignis behandelt? – 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

Ein paar Tippfehler wurden behoben, um das Demo funktionieren zu lassen. –

Verwandte Themen