Alle Checkboxen selektieren

Screenshot vom Code

In diesem kurzen Tutorial möchte ich euch zeigen, wie man ein kleines Script schreibt, dass alle Checkboxen aus- oder abwählt. Diese Funktion wird bei praktisch jeder Anwendung gebraucht. Und leider viel zu oft immer neu geschrieben. Aus diesem Grund habe ich das Script in Form eines jQuery Plugins geschrieben und auf GitHub.com veröffentlicht. Wer also auf der Suche nach solch einem Plugin ist, der kann sich gerne bedienen.

Vorbereitung

Alle Checkboxen, die zusammengehören, haben in der Regel denselben Wert im name-Attribut. (In unserem Beispiel items[].) Dieser Wert wird also auch als Referent verwendet, um alle Checkboxen auszuwählen. Wir erstellen also eine neue Checkbox und geben dem data-reference-Attribut den Wert items[]. Das entspricht dem name-Attribut der Checkboxen.

Der Code

Gehen wir von diesem HTML Konstrukt aus:

1
2
3
4
5
6
7
<label for="item-1"><input id="item-1" type="checkbox" name="items[]" value="1" /> Ben</label>
<label for="item-2"><input id="item-2" type="checkbox" name="items[]" value="2" /> John</label>
<label for="item-3"><input id="item-3" type="checkbox" name="items[]" value="3" /> Felix</label>
<label for="item-4"><input id="item-4" type="checkbox" name="items[]" value="4" /> Alex</label>
<label for="item-5"><input id="item-5" type="checkbox" name="items[]" value="5" /> Tim</label>
 
<label><input id="select-all" type="checkbox" name="select-all" value="" data-reference="items[]" /> Select all</label>

Klick man nun die Checkbox mit der ID select-all an, so werden alle Checkboxen mit dem Namen selektiert und ausgewählt.

1
2
3
4
5
6
7
8
9
10
11
$('#select-all').on('click', function (e) {
  var activator = $(this);
  var reference = activator.data('reference');
 
  if (activator.is(':checked')) {
    $(':checkbox[name="' + reference + '"]').attr('checked', 'checked');
  }
  else {
    $(':checkbox[name="' + reference + '"]').removeAttr('checked');
  }
});

Im Grunde genommen war’s das auch schon. Das jQuery Plugin wurde nur um eine weitere Option erweitert: Es kann den Status der Checkboxen umkehren. Ausgewählte Checkboxen werden abgewählt und umgekehrt.

ALL-INKL.COM