Javascript: Mehrere Checkboxen mit einem Klick markieren
Dienstag, 26. August 2008 10:40
Bei größeren Formularen steht man häufig vor dem Problem, dem Benutzer jede Menge Klicks auf Checkboxen zumuten zu müssen.
Dieses Script aktiviert oder deaktiviert auf einen Schlag alle im Formular vorkommenden Checkboxen.
Dazu wird eine Checkbox als 'Master'-Checkbox verwendet, alle anderen richten sich nach dieser.
Der HTML-Code könnte so aussehen:
Die Javascript-Funktion selectCheckboxes sieht so aus (zum direkten Einbinden in HTML muss die Funktion zwischen <script type="text/javascript"><!-- und --></script> stehen):
Dieses Script aktiviert oder deaktiviert auf einen Schlag alle im Formular vorkommenden Checkboxen.
Dazu wird eine Checkbox als 'Master'-Checkbox verwendet, alle anderen richten sich nach dieser.
Der HTML-Code könnte so aussehen:
HTML4STRICT: (Auswählen)
<form method="post" action="#" id="checkboxTest">
<input type="checkbox" name="mod[]" id="mod_1" value="1" />
<input type="checkbox" name="mod[]" id="mod_2" value="2" />
<input type="checkbox" name="mod[]" id="mod_3" value="3" />
<input type="checkbox" name="masterCheckBox" id="masterCheckBox" onclick="selectCheckboxes('checkboxTest');" />
<input type="submit" name="submit" value="Abschicken" />
</form>
Die Javascript-Funktion selectCheckboxes sieht so aus (zum direkten Einbinden in HTML muss die Funktion zwischen <script type="text/javascript"><!-- und --></script> stehen):
JAVASCRIPT: (Auswählen)
function selectCheckboxes(formname) {
for (var i = 0;i < document.forms[formname].elements.length;i++) {
if(document.forms[formname].elements[i].type == 'checkbox'){
document.forms[formname].elements[i].checked = document.forms[formname].masterCheckBox.checked;
}
}
}
Signatur:\\\"I have not failed. I\\\'ve just found 10,000 ways that won\\\'t work.\\\" - Thomas Alva Edison (1847-1931)