Checkbox-Link

von Thiemo

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)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.