Alle Checkboxen aktivieren/deaktivieren
Codeschnipsel | letzte Änderung am 21. Juli '10 um 18:30 Uhr
Motivation
Um die Bedienung bei der Auswahl mehrerer Einträge über Checkboxen zu vereinfachen, sollen alle Checkboxen gleichzeitig aktiviert und deaktiviert werden können.
Eine Checkbox zur Funktionssteuerung
Über eine weitere Checkbox soll das Aktivieren beziehungsweise Deaktivieren der Checkboxen ermöglicht werden!
<script type="text/javascript">
function check_all(form_id, checkbox_id) {
var form = document.getElementById(form_id);
for(i = 0; i < form.elements.length; i++) {
if(form.elements[i].type == "checkbox") {
if (document.getElementById(checkbox_id).checked) {
form.elements[i].checked = true;
}
else {
form.elements[i].checked = false;
}
}
}
}
</script>
<form id="form1" method="post" action="">
<?php
for ($i = 0; $i < 10; ++$i) {
?>
<input type="checkbox" name="element[]" value="<?php echo $i; ?>" />
<?php
}
?>
<label for="check1">Alle aktivieren</label>
<input type="checkbox" name="check" id="check1"
onclick="check_all('form1', 'check1');" />
</form>
Die Javascript-Funktion
function check_all(form_id, checkbox_id)
erwartet als Parameter die ID des Formulars, innerhalb dessen die Checkboxen angehakt werden sollen und die ID der Checkbox, die als Vergleich dient, um entscheiden zu können, ob die Checkboxen aktiviert oder deaktiviert werden.
Das ist notwendig, damit innerhalb eines Dokuments auch mehrere Formulare verwendet werden können, die diese Funktion nutzen sollen.
Antworten
Hi nikosch,
wie du offenbar bemerkt hast, bin ich nicht so fit im Basteln mit Javascript, sonst wäre da schon längt etwas passiert.
Ich habe leider schon selbst bemerkt, dass sich die Funktion nicht so einfach auf andere Anwendungsfälle übertragen lässt.
Quote:
1: Du übergibst die Form-ID. Du solltest das allgemeiner Als node bezeichnen, denn auch die Selektierung aller Checkboxes, die in einem div oder fieldset liegen, kann eine sinnvolle Anwendung sein.
Genau das ist mir passiert. Ich bin nur leider noch nicht dazu gekommen, eine generische Lösung zu basteln.
Vielleicht komme ich jetzt mal mit deinen Tipps dazu.
Gruß
nikosch | verfasst am 08. Februar '11 um 16:59 Uhr
#1
1: Du übergibst die Form-ID. Du solltest das allgemeiner Als node bezeichnen, denn auch die Selektierung aller Checkboxes, die in einem div oder fieldset liegen, kann eine sinnvolle Anwendung sein.
2: Ich würde die Ermittlung der CB-Elemente und den Select-All-Prozess komplett trennen. Ein Beispiel wäre eine Tabelle mit Elementen und [x] Feldern. In einer Tabelle sind die Elemente mitunter nicht mehr linear angeordnet und es kann sinnvoll sein, sie auf eine andere Art als der obigen for-Schleife zusammenzustellen. Ergo: Der Funktion besser ein Array von Elementen übergeben, als eine ID. Ein anderer Anwendungsfall ist, wenn die Check-All-Box mit im Fieldset liegt. Die nochmal mitzuselektieren ist irgendwie unsauber.
3: Falls nicht - auch ein Node-Objekt zu übergeben ist besser als eine ID, denn Elemente kann man auch auf andere Art selektieren, als nur ünber Ihre ID (sofern sie überhaupt eine haben). Wiederum ein Beispiel: Gegeben man hätte mehrere fieldsets, denen man wiederum die Select-All-Funktion zuweisen will. Dann ist es leichter über die Fieldsets zu iterieren und den Node jeweils zu übergeben.
4: if (document.getElementById(checkbox_id).checked) {
form.elements[i].checked = true;
} else {...}
lässt sich vereinfachen:
var state = document.getElementById(checkbox_id).checked;
for (...) {
form.elements[i].checked = state;
}