jQuery: Alle Checkboxen mit einem Klick auswählen
Vor allem in Adminbereichen und in der Verwaltung bzw. Pflege einer größeren Anzahl von Einträgen / Daten benötigt man Checkboxen. Grund ist in diesem Fall die Optimierung des Beabeitungsprozesses durch den Nutzer. In der Praxis wäre hier das Löschen von mehreren Bildern oder Einträgen, was man als Content zusammenfassen kann, ein gutes Beispiel dafür. In jeder Zeile und zu jedem Eintrag oder Bild könnte ein Button zum Löschen angezeigt werden. Allerdings müsste man so bei 50 Bildern beispielsweise 50 Mal auf den Button Löschen klicken. Die Zeitersparnis, die man mit Checkbox und einer Löschfunktion hätte, ist enorm.
In diesem Tutorial möchte ich nicht auf die eigentliche Löschfunktion eingehen, sondern mehr auf das Markieren der Checkboxen. Angenommen wir haben auf unserer Seite, besser gesagt in unserem Formular, drei Einträge und somit 3 Inputelemente vom Typ „checkbox“ sowie einen Submitbutton:
|
1 2 3 4 5 6 7 8 9 10 |
<form action="admin/delete.php" method="post"> <p> <a href="#" class="marker">Alle markieren</a> </p> <input type="checkbox" name="content[]" value="1" /> Eintrag 1 <input type="checkbox" name="content[]" value="2" /> Eintrag 2 <input type="checkbox" name="content[]" value="2" /> Eintrag 3 <input type="submit" name="delete" value="Einträge löschen" /> </form> |
Desweiteren kann man sehen, dass ein Link über den Boxen eingefügt wurde. Mit einem Klick auf den Link sollen alle Checkboxen markiert werden. Jetzt fehlt natürlich noch unser jQuery Script, welches bei einem Klick-Event für den Nutzer mehrere Checkboxen gleichzeitig auswählt.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function() { $('a.marker').click(function() { var content = $("input[name='content[]']"); content.attr("checked", !content.attr("checked")); return false; }); }); </script> |
Kurz zum jQuery-Script: Beim Laden der Seite wird das Klickereignis an den Link gebunden. Sobald der Nutzer auf den Link geklickt hat, wird eine Funktion ausgeführt, in der zuerst nach allen input-Elementen mit dem Namen content[] gesucht wird. Für diese Elemente wird anschließend das Attribut checked auf den Gegenwert gesetzt.
Der Wert !content.attr(„checked“) liefert entweder TRUE oder FALSE zurück. Gleichzeitig wird dieser Wert als zweiter Parameter in der selbigen Funktion eingesetzt, sodass der Wert zuerst abgefragt und davon gleichzeitig der Gegenwert für das Attribut „checked“ des Checkbox-Elements gesetzt wird. Mit return false; wird in der Funktion verhindert, dass die Webseite beim Klicken nach oben springt, weil für das href-Attribut im Link (Anker) keine richtige URL, sondern eine Raute angegeben wurde.
Die letzten Kommentare