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
Kategorien:Javascript