Checkboxen sind oftmals für manche Benutzer zu klein, um ihren Cursor genau zu plazieren. Mit ein wenig JavaScript können Sie das ändern.
Die Aufgabe des Linkes ist es, die Zustände einer Checkbox
auf Klick zu verändern.
Es muss über eine JavaScript Funktion auf den Zustand des Elementes
zugegriffen werden, und diesen dann entsprechend ändern.
Das Ergebnis:
<script type="text/javascript">
<!--
function wechsel(box)
{
if(box.checked)
{
box.checked = false;
}
else
{
box.checked = true;
}
}
// -->
</script>
An die Funktion wechsel(), muss die Checkbox übergeben werden,
sodass ein Zugiff auf das Element möglich ist.
Ein Formular könnte so aussehen:
<form name="checkbox">
<input type="checkbox" name="box" checked="checked">
<a href="javascript:wechsel(document.checkbox.box)">
Box an/aus</a>
</form>
Die Übergabe der Checkbox erfolgt nach folgendem Muster.
javascript:wechsel(document.formularname.checkboxname)
In unserem Beispiel ist der Name des Formulars "checkbox",
und die Checkbox hat den Namen "box".
Es besteht auch die Möglichkeit auf die Funktion zu verzichten
und die Anweisung direkt in den Link zu integrieren. Dies würde
mit folgendem Code gehen:
<a onclick="if(document.checkbox.box.checked) document.checkbox.box.checked=false;
else document.checkbox.box.checked=true;" href="#">
Box an/aus</a>
Aufgrund der Behindertengerechten Gestaltung sollte man jedoch bei
einem solchen Link das Attribut "onKeyPress" verwenden,
sodass auch Behinderte ohne Maus durch die Seite navigieren können.
(tf)
geht leichter über -label Tag und ID für checkbox