jQuery: Alle Checkboxen markieren (Select/Unselect All)
Tipp von Stefan Trost | Letztes Update am 17.11.2022 | Erstellt am 07.01.2013
Haben wir in einem HTML-Formular eine große Anzahl von Checkboxen - zum Beispiel wie in einem Mailprogramm mit einer Liste von E-Mails, in der jede E-Mail ausgewählt werden kann - bietet sich an, eine "Alles Markieren"-Funktion bereitzustellen. Abhängig von dem aktuellen Zustand der Checkboxen sollen mit dieser Funktion entweder alle Checkboxen selektiert werden oder der Haken aus allen bereits selektierten Checkboxen soll wieder entfernt werden.
In diesem Tutorial möchte ich euch zeigen, wie ihr diese Funktion schnell und unkompliziert mit der Hilfe von jQuery implementieren könnt.
HTML
Stellen wir uns zunächst eine beliebige Liste von Checkboxen auf einer HTML-Seite vor:
<label><input type="checkbox" name="mails[]" value="1"> Mail 1</label> <label><input type="checkbox" name="mails[]" value="2"> Mail 2</label> <label><input type="checkbox" name="mails[]" value="3"> Mail 3</label> <label><input type="checkbox" name="mails[]" value="4"> Mail 4</label> ... <span id="checkall">Alles markieren</span>
Beispielhaft sind dies hier die E-Mails 1 bis 4 in einem Posteingang. Jeder Checkbox geben wir den selben Namen mails[], so dass wir die Checkboxen einerseits später leicht über jQuery ansprechen können und sich andererseits die Checkboxen später einfach über PHP empfangen und auswerten lassen. Alternativ könnten wir natürlich auch allen Checkboxen die selbe Klasse zuweisen, da wir den Namen aber sowieso für PHP benötigen, belassen wir es dabei.
Irgendwo unter der Liste haben wir unsere Schaltfläche "Alles markieren" platziert. Wir geben ihr die ID "checkall", so dass wir ihr mit jQuery einfach eine Funktion zuweisen können. Zusätzlich könnten wir die ID "checkall" noch über CSS designen, zum Beispiel dass es aussieht wie ein Link oder wie ein Button.
JavaScript: jQuery
Nun wollen wir uns unseren JavaScript/jQuery Code ansehen, in der wir unser Schaltfläche in der zweiten Zeile über die oben genannte ID "checkall" die nötige Funktion zuweisen:
$(document).ready(function() { $("#checkall").click(function() { var cblist = $("input[name=mails\\[\\]]"); cblist.attr("checked", !cblist.attr("checked")); }); });
In der dritten Zeile holen wir uns eine Liste aller Checkboxen, die den Namen mails[] tragen und speichern diese in der Variablen "cblist". Die Escape-Zeichen \\ sind hier nötig, damit [ und ] auch als Teil des Namens der Checkboxen und nicht als Klammern des Selektors erkannt werden.
In der vierten Zeile schließlich ändern wir das Attribut "checked" aller Checkboxen in der Liste in das Gegenteil des aktuellen Zustandes (das ! negiert den aktuellen Zustand, den wir über cblist.attr("checked") ausgelesen haben). Damit ändert sich der Zustand aller Checkboxen bei jedem Klick auf "Alles markieren".
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
PHP: Eine E-Mail versenden
Tutorial | 0 Kommentare
MySQL: Zeilenumbrüche in MySQL
Tipp | 0 Kommentare
Wie man Spam Mails vermeidet
Tipp | 0 Kommentare
PHP Mail Funktion: UTF-8 Header in E-Mails
Info | 0 Kommentare
PHP: Formular mit vielen Checkboxen komfortabel an Skript übergeben
Tipp | 10 Kommentare
Mehrere Texte gleichzeitig ersetzen
Tutorial | 0 Kommentare
E-Mail an mehrere Empfänger versenden
Tipp | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.