Manchmal möchte man auf einer Webseite den Benutzen die Möglichkeit geben, mehrere Checkboxen aufs mal zu Markieren. So muss der Benutzer nicht jede Checkbox einzeln anklicken, sondern kann mit einem klick auf "Alle Markieren" alle Checkboxen markieren.

Dies ist keine grosse Sache. Mit einer JavaScript Funktion kann man das Problem recht simpel lösen. Über einen Link wird die Funktion aufgerufen, welche dann die Checkboxen markiert. Also mal angenommen, wir haben den folgenden HTML Code:

<input type="checkbox" name="box" value="1" />
<input type="checkbox" name="box" value="2" />
<input type="checkbox" name="box" value="3" />
<input type="checkbox" name="box" value="4" />
<input type="checkbox" name="box" value="5" />
<input type="checkbox" name="box" value="6" />
<input type="checkbox" name="box" value="7" />
<input type="checkbox" name="box" value="8" />
<input type="checkbox" name="box" value="9" />

Nun benötigen wir im Header der HTML Datei noch die folgende Javascript Funktion:

var marker=false;
function mark()
{
    var elements=document.getElementsByName("box");

    if(marker==false)
    {
        for(i=0;i<elements.length;i++)
        {
            elements[i].checked=true;
            marker=true;
        }
    }
    else
    {
        for(i=0;i<elements.length;i++)
        {
            elements[i].checked=false;
            marker=false;
        }
    }
}

Wenn diese Funktion nun aufgerufen wird, werden beim ersten mal alle Checkboxen markiert, beim zweiten Durchgang wird die Markierung wieder entfernt. Der Zustand der Markierung wird in der Variable marker gespeichert.

Aufrufen kann man die Funktion mit einem Link in der folgenden Art. Allerdings gibt es da auch noch viele andere Möglichkeiten.

<a href="#" onClick="mark()">Alle Markieren</a>