Snippet: „alle auswählen“-Checkboxen

Folgender Snippet ermöglicht das „alle auswählen“. Bei Klick auf eine Checkbox werden alle Checkboxen aktiviert oder deaktiviert, bei der Deaktivierung einer einzelnen Checkbox wird die „alle auswählen“ deaktiviert (sind ja nicht mehr alle ausgewählt), bei manueller Aktivierung wird die „alle auswählen“ wieder aktiviert.

Benötigt JQuery. Jede Checkbox eines Elementes bekommt die Klasse „check-all-box“, die Checkbox, die alle toggelt, die ID „check-all-box-action“

Vorschau:

1
2
3
Alle auswählen

Code:

<input type="checkbox" class="check-all-box" onchange="jQuery('#check-all-box-action').data('foreign', 1) && jQuery('#check-all-box-action').prop('checked', $('.check-all-box:checked').length == $('.check-all-box').length) && jQuery('#check-all-box-action').data('foreign', 0)"> 1
<input type="checkbox" class="check-all-box" onchange="jQuery('#check-all-box-action').data('foreign', 1) && jQuery('#check-all-box-action').prop('checked', $('.check-all-box:checked').length == $('.check-all-box').length) && jQuery('#check-all-box-action').data('foreign', 0)"> 2
<input type="checkbox" class="check-all-box" onchange="jQuery('#check-all-box-action').data('foreign', 1) && jQuery('#check-all-box-action').prop('checked', $('.check-all-box:checked').length == $('.check-all-box').length) && jQuery('#check-all-box-action').data('foreign', 0)"> 3
<input id="check-all-box-action" type="checkbox" autocomplete="off" data-foreign="0" onchange="$(this).data('foreign') == 0 && $('input.check-all-box').prop('checked', this.checked);"> Alle auswählen

Kategorie: Javascript

tino-ruge.de wird tino-kuptz.de

Im Laufe des Jahres 2024 wird dieser Blog umziehen. Alle Inhalte werden 1:1 weitergeleitet, nix geht verloren. Neue Domain, alter Autor, alter Inhalt.