 Checkboxen alle markieren
Hier finden sie ein Beispiel zur Anwahl aller Checkboxen oder einer Gruppe von Checkboxen innerhalb eines Formulars. Auch die spätere Abwahl ist möglich. Ein JavaScript 'toggelt' den Text auf dem Formularbutton.
Arbeitsweise
Generell: Im HTML-Tag für eine Checkbox kann man als Attribut "checked" eintragen, um den Status 'selektiert' von vorneherein festzulegen. Mit JavaScript kann man diesen Status ändern.
Anweisungen: checked="true" oder checked="false"
Die HTML-Tags der Checkboxen erhalten im Attribut name=" " einen Bezeichner. Für die Boxen, die mittels Button selektiert / deselektiert werden sollen, ist der Eintrag immer gleich (hier: 'list').
Im Script wird eine Schleife durchlaufen und setzt den Wert für "checked", abhängig vom aktuellen Zustand, auf 'true' (selektiert) oder auf 'false' (nicht selektiert).
<input type="checkbox" name="list" value="1">Textfarbe
<input type="checkbox" name="list" value="2">Hintergrundfarbe
..
Was durch die Funktion angesprochen / beeinflusst werden soll, wird beim Aufruf der Funktion übergeben. Hier werden die Elemente mit dem Eintrag 'list' festgelegt.
onClick="this.value=check(this.form.list)"
Die An- bzw. Abwahl wird innerhalb einen Schleife organisiert.
Die Anzahl der Durchläufe in der Schleife wird bestimmt durch 'field.length', der Anzahl der Elemente, die beeinflusst werden sollen.
Quelltext
im Head:
<script type="text/javascript" language="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return " keine "; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return " alle "; }
}
// End -->
</script>
im Body
<form name="myform" action="" method="post">
<input type="checkbox" name="list" value="1">Textfarbe
<input type="checkbox" name="list" value="2">Hintergrundfarbe
<input type="checkbox" name="list" value="3">Farbkombination
<input type="checkbox" name="list" value="4">Kontrast
<input type="checkbox" name="list" value="5">Schriftgröße
<input type="button" value=" alle auswählen "
onClick="this.value=check(this.form.list)">
</form>
|
WWW.WEB-TOOLBOX.NET
ScriptCode 
ZURÜCK