57 Stimmen

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".

AntwortenPositivNegativ

Über den Autor

AvatarSoftware 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

Wie man Spam Mails vermeidet

Tipp | 0 Kommentare

CSS-Stylesheets in HTML einbinden

Tutorial | 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.