Javascript: Mehrere Checkboxen mit einem Klick markieren (Teil 2)
Donnerstag, 04. Juni 2009 14:20
In diesem Posting hier habe ich beschrieben, wie man mithilfe einer Master-Checkbox mehrere weitere Checkboxen markiert bzw. die Markierung aufhebt. Das Ganze funktioniert aber auch mit einem Button. Hierbei werden beim ersten Klick alle Checkboxen markiert, beim zweiten Klick wird die Markierung wieder aufgehoben.
Der HTML-Part könnte folgendermaßen aussehen:
Die Javascript-Funktion selectCheckboxes sieht so aus (zum direkten Einbinden in HTML muss die Funktion zwischen <script type="text/javascript"><!-- und --></script> stehen; wer es XHTML valide mag, sollte das Javascript mit dem Character-Data-Block einfassen: <script type="text/javascript">// <![CDATA[ und // ]]></script>):
Der HTML-Part könnte folgendermaßen 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 id="newsletter_checker" type="submit" name="submit" value="Alle markieren" onclick="selectCheckboxes('checkboxTest');return false" />
</form>
Die Javascript-Funktion selectCheckboxes sieht so aus (zum direkten Einbinden in HTML muss die Funktion zwischen <script type="text/javascript"><!-- und --></script> stehen; wer es XHTML valide mag, sollte das Javascript mit dem Character-Data-Block einfassen: <script type="text/javascript">// <![CDATA[ und // ]]></script>):
JAVASCRIPT: (Auswählen)
var marker = true;
function selectCheckboxes(formname) {
if (marker == false) {
document.getElementById('newsletter_checker').value = 'Alle demarkieren';
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 = true;
marker = true;
}
}
} else {
document.getElementById('newsletter_checker').value = 'Alle markieren';
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 = false;
marker = false;
}
}
}
}
Signatur:\\\"I have not failed. I\\\'ve just found 10,000 ways that won\\\'t work.\\\" - Thomas Alva Edison (1847-1931)