RSS Feed
Twitter
Für das Auswählen aller Checkboxen, sobald eine bestimmte Checkbox geklickt wurde, habe ich für euch hier einmal ein kleines JQuery-Snippet. Ein häufiger Anwendungsfall einer solchen Funktion ist z.B. eine Tabelle in der ich bestimmte oder eben alle Tabellenzeilen per Checkbox auswählen lassen möchte. Klicke ich auf die Checkbox, die symbolisch für “Alle Tabellenzeilen markieren” steht, werden alle Tabellenzeilen mit dem untenstehenden JQuery-Code markiert.
Demo/Beispiel
HTML-Code – Ausgangssituation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <tr> <th><input name="check_all" type="checkbox" value="0" /></th> [...] </tr> <tr> <td><input name="id" type="checkbox" value="1" /></td> [...] </tr> <tr> <td><input name="id" type="checkbox" value="2" /></td> [...] </tr> <tr> <td><input name="id" type="checkbox" value="2" /></td> [...] </tr> </table> |
JQuery-Snippet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("input[name='check_all']").click(function(){ if($(this).val()==0){ $(this).parents("table") .find("input:checkbox") .attr("checked","checked") .val("1"); } else{ $(this).parents("table") .find("input:checkbox") .attr("checked","") .val("0"); } }); |
Erklärung
In Zeile 1 wird das Input-Feld mit dem, welches symbolisch für das Markieren aller Checkboxen steht, mit dem Click-Event verbunden. In der Zeile 2 folgt eine IF-Bedingung um zu schauen, welcher Status, also ob alle Checkboxen zur Zeit gesetzt sind oder nicht, vorliegt. Dies wird über das Value-Attribut des Input-Feld gesteuert. Defaultmäßig steht der Value auf “0″.
In den Zeilen 3 – 6 erfolgt das eigentlich Setzen der Checkboxen. Es wird vom geklickten Element aus geschaut, wo sich das nächste <table>-(Eltern-)Element befindet. Innerhalb dieser Tabelle werden dann alle Checkboxen markiert. In diesem Beispiel ist es abhängig von der Tabelle, es kann aber auch problemlos auf ein <form>-Tag mit einer ID angewendet werden. Dazu müsste lediglich parents(“table”) durch parents(“form#id”) im IF-Block (Zeile 3) sowie im ELSE-Block (Zeile 9) getauscht werden.
In den Zeilen 8 – 13 folgt der ELSE-Zweig, in dem, bei bereits gesetzten Checkboxen, alle Checkboxen deaktiviert werden. Hier werden ebenfalls nur alle Checkboxen berücksichtigt, die sich innerhalb einer Tabelle befinden.
Hoffe ihr habt schon eine nette Verwendung für dieses kleine JQuery-Snippet gefunden 
Nur wenn die Checkboxen alle auf eine Variable zeigen, ist später bei der Bearbeitung nur ein Wert vorhanden, und zwar der letzte. Deswegen müssen die Checkboxen nen Array als Namen haben. Hier würde man als Namen also id[] schreiben, um später alle ausgewählten Boxen mit der entsprechenden Value in einem Array.
Vielen Dank für deine Ergänzung, Markus.
Ich gehe mal davon aus, dass du PHP meinst?! Da magst du recht haben.
Es ist allerdings abhängig davon, mit welcher Programmiersprache du arbeitest. Bei Coldfusion z.B. kommt eine komma-seperierte Liste an.
Jo, in PHP wärs nen Array, wies in anderen Sprachen ist weiß ich nicht. Aber die Checkboxen müssen auf jeden Fall nen Namen mit [] am Ende haben, sonst wird nur eine Value übertragen
Warum nicht einfach mit einer “Pseudo”-Klasse arbeiten?
Jedes Element ein ‘class=”check_all weitereKlasse”‘ hinzufügen, dann kann man mit jquery einfach nach Elementen mit der Klasse suchen.
So muss man sich keine Gedanken um den Aufbau der Website machen (Tabelle, Liste, whatever…) und hat eine generische Funktion.
Könnte also so aussehen:
$(“input[name='check_all']“).click(function() {
if($(this).attr(“checked”)) {
$(“.check_all”).attr(“checked”,”checked”);
} else {
$(“.check_all”).removeAttr(“checked”);
}
});
Spart ein wenig Code und macht die Sache unabhängiger vom HTML-Gerüst. Das ganze als Funktion ausgelagert, dann als onclick-Event an die Check-Box und schon ist der Code in mehreren Projekten zu verwenden.
Erst einmal Danke für das Script. Nur mal eine Frage. Kann man das auch offline Benutzen? Hat wahrscheinlich mit JQuery zu tun aber ich habe in dem gebiet leider noch keine Erfahrungen.
@chrisgun:
kein Problem. Ich hoffe es hat dir weiterhelfen können. Was genau meinst du mit “offline benutzen”? Lokal auf deinem PC?
Gruß,
Dennis
Im Beispiel fehlt eine schliessende Klammer. Hat ganz schön gedauert bis ich den Grund für den Fehler gefunden habe.
gruss Yves
Hey Yves,
danke für den Hinweis, ich habe es angepasst
Gruß,
Dennis
Ok, habe da noch ein Verständnisproblem
in meiner Aufgabenstellung haben die Checkboxen alle den gleichen Namen und eine unterschiedliche Value. Nun überschreibt das Skript alle Values.
Wie kann ich das verhindern und ausschliesslich den Haken setzen/entfernen.
Hey Yves,
jetzt ist bei mir auch ein Verständnisproblem da. Könntest du mir deinen Quellcode zeigen, ich verstehe nicht so ganz, was du mit dem Überschreiben der Values meinst. Du kannst dich auch gerne per E-Mail melden, wenn du den Quellcode nicht öffentlich posten willst.
Gruß,
Dennis