Checkbox-Link

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:



Box an/aus

<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)

This entry was posted in Javascript Tricks. Bookmark the permalink.

One Response to Checkbox-Link

  1. Daniel says:

    geht leichter über -label Tag und ID für checkbox

Leave a Reply

Your email address will not be published. Required fields are marked *