2010-02-09 20 views
57

Ich brauche Hilfe mit jQuery Selektoren. Sagen wir, ich habe eine Markup wie unten dargestellt:Wählen Sie alle Kontrollkästchen mit jQuery

<form> 
    <table> 
     <tr> 
      <td><input type="checkbox" id="select_all"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
    </table> 
</form> 

Wie alle Kontrollkästchen erhalten, außer #select_all wenn Benutzer klickt auf sie?
Jede Hilfe wird geschätzt.

Antwort

83

einem vollständigeres Beispiel, das in Ihrem Fall funktionieren sollte:

$('#select_all').change(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    checkboxes.prop('checked', $(this).is(':checked')); 
}); 

Wenn die #select_all Checkbox angeklickt wird, wird der Status der Checkbox aktiviert und alle Kontrollkästchen in der aktuellen Form auf den gleichen Status gesetzt.

Beachten Sie, dass Sie das Kontrollkästchen #select_all nicht aus der Auswahl ausschließen müssen, da es den gleichen Status wie alle anderen aufweist. Wenn Sie aus irgendeinem Grund die #select_all ausschließen müssen, können Sie diese verwenden:

var checkboxes = $(this).closest('form').find(':checkbox').not($(this)); 
+1

Danke, Tatu! Das ist, was ich brauche – Darmen

+14

Für mich funktionierte das nur das erste Mal (dh, alle, deaktivieren Sie alle). Beim zweiten "Alle überprüfen" wurde keines der anderen Kontrollkästchen aktiviert. Ich habe 'checkboxes.prop ('checked', true);' und 'checkboxes.prop ('checked', false);' stattdessen aus [dieser Antwort] (http://stackoverflow.com/a/15266603/1438809). Hoppla, habe gerade festgestellt, dass dies in den Antworten weiter unten auf der Seite erwähnt wird ... – Felix

+3

[jQuery-Dokumentation] (https://api.jquery.com/checkbox-selector/) gibt an, dass $ ("[type = checkbox]") 'ist schneller für moderne Browser (schneller als' $ (': checkbox') '). – Todd

13
$("form input[type='checkbox']").attr("checked" , true); 

oder Sie können verwenden, um die

:checkbox Selector

$("form input:checkbox").attr("checked" , true); 

Ich habe Ihre HTML geschrieben und lieferten einen Click-Handler für das Hauptkontrollkästchen

$(function(){ 
    $("#select_all").click(function() { 
     $("#frm1 input[type='checkbox'].child").attr("checked", $(this).attr("checked")); 
    }); 
}); 

<form id="frm1"> 
    <table> 
     <tr> 
      <td> 
       <input type="checkbox" id="select_all" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
    </table> 
</form> 
+0

Achten Sie darauf, nicht alle Kontrollkästchen auf der Seite zu überprüfen ... :) –

+0

Eigentlich ist die richtige Syntax '.attr (" aktiviert "," aktiviert ")'. –

+0

+1 Danke rahul, aber ich musste alle Checkboxen finden, wenn der Benutzer auf das Kontrollkästchen #select_all klickt. – Darmen

0
$('.checkall').change(function() { 
    var checkboxes = $(this).closest('table').find('td').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 
41

einfach und sauber

$('#select_all').click(function() { 
    var c = this.checked; 
    $(':checkbox').prop('checked',c); 
}); 
+4

das kann auch so gemacht werden ... '$ (': checkbox'). Prop ('checked', this.checked);' –

+0

Subtil - setzt den Status der gefundenen Checkboxen auf den gleichen Wert wie zuletzt geändert ' Master Checkbox - einfach, elegant und überraschend logisch, wenn Sie darüber nachdenken - Danke! –

3
$(function() { 
$('#select_all').click(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 
    }); 
3
$(document).ready(function(){ 
    $("#select_all").click(function(){ 
     var checked_status = this.checked; 
     $("input[name='select[]']").each(function(){ 
     this.checked = checked_status; 
     }); 
    }); 
    }); 
29

Top Antwort wird nicht funktionieren in JQuery 1.9+ wegen der Methode attr(). Verwenden Sie prop() statt.

$(function() { 
    $('#select_all').change(function(){ 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
     if($(this).prop('checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    }); 
}); 
+0

Danke dafür, habe ich Ihre Implementierung mit JQuery 1.8.3 verwendet ;-) –

+1

Das OP modifizierte die Antwort, um mit "letzten" Änderungen fertig zu werden :) –

0
$("#select_all").live("click", function(){ 
      $("input").prop("checked", $(this).prop("checked")); 
    } 
    }); 
+2

Fügen Sie einige Erklärung/Kommentar hinzu –

0

$ ("# select_all") Änderung (function() {

$ ('input [type = "checkbox"]') prop (. "checked", $ (this) .prop ("checked"));

});

0

Ich bin jetzt teilweise zu diesem Stil.

Ich habe Ihr Formular benannt und Ihrem Feld select_all ein 'onClick' hinzugefügt.

Ich habe auch das Kontrollkästchen "select_all" aus dem jquery-Selektor ausgeschlossen, damit das Internet nicht explodiert, wenn jemand darauf klickt.

function toggleSelect(formname) { 
    // select the form with the name 'formname', 
    // then all the checkboxes named 'select[]' 
    // then 'click' them 
    $('form[name='+formname+'] :checkbox[name="select[]"]').click() 
} 

<form name="myform"> 
    <tr> 
     <td><input type="checkbox" id="select_all"  
        onClick="toggleSelect('myform')" /> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
</table> 

0

Hier ist eine grundlegende jQuery-Plugin schrieb ich, dass alle Kontrollkästchen auf der Seite auswählt, außer das Kontrollkästchen/Element, das als Knebel verwendet werden soll:

(function($) { 
    // Checkbox toggle function for selecting all checkboxes on the page 
    $.fn.toggleCheckboxes = function() { 
     // Get all checkbox elements 
     checkboxes = $(':checkbox').not(this); 

     // Check if the checkboxes are checked/unchecked and if so uncheck/check them 
     if(this.is(':checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    } 
}(jQuery)); 

Dann rufen Sie einfach die Funktion auf Ihrem Kontrollkästchen oder Schaltflächenelement:

// Check all checkboxes 
$('.check-all').change(function() { 
    $(this).toggleCheckboxes(); 
}); 
3
jQuery(document).ready(function() { 
     jQuery('.select-all').on('change', function() { 
      if (jQuery(this).is(':checked')) { 
       jQuery('input.class-name').each(function() { 
        this.checked = true; 
       }); 
      } else { 
       jQuery('input.class-name').each(function() { 
        this.checked = false; 
       }); 
      } 
     }); 
    }); 
+0

Code ist großartig, aber einige Erklärungen warum so es hilft, ist immer willkommen. –

2

Dieser Code funktioniert gut mit mir

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#select_all").change(function(){ 
    $(".checkbox_class").prop("checked", $(this).prop("checked")); 
    }); 
}); 
</script> 

Sie nur Klasse checkbox_class Checkbox Auf alle

Einfach und einfach hinzufügen müssen: D

0

mit dem Problem konfrontiert, Keine der obigen Antworten funktioniert nicht. Der Grund dafür war in jQuery Uniform Plugin (Arbeit mit theme metronic) .Ich hoffe, die Antwort von Nutzen sein wird :)

Businesses jQuery Uniform

$('#select-all').change(function() { 
    var $this = $(this); 
    var $checkboxes = $this.closest('form') 
     .find(':checkbox'); 

    $checkboxes.prop('checked', $this.is(':checked')) 
     .not($this) 
     .change(); 
}); 
0

Eine Checkbox zu regieren sie alle

Für Leute, die noch suchen Für Plugins, um Checkboxen über eine leicht zu steuern, hat Out-of-the-Box-Unterstützung für UniformJS und iCheck und wird deaktiviert, wenn mindestens eine der kontrollierten Checkboxen deaktiviert ist (und wird überprüft, wenn alle kontrollierten Checkboxen natürlich überprüft werden) ve erstellt eine jQuery checkAll plugin.

Fühlen Sie sich frei, die Beispiele auf documentation page zu überprüfen.


Für diese Frage Beispiel alles, was Sie tun müssen, ist:

$('#select_all').checkall({ 
    target: 'input[type="checkbox"][name="select"]' 
}); 

Ist das nicht klar und einfach?

Verwandte Themen