Checkboxen

Die Nutzung von Checkboxen ist eine gut Wahl, wenn man dem Besucher die Möglichkeit geben möchte aus einer Liste mehrere Elemente auszuwählen. In dieser Beziehung arbeiten Checkboxen genau entgegengesetzt zu den Radio-Buttons, die ja nur eine Auswahl aus einer ganzen Gruppe zulassen. Die einfachste Variante einer Checkbox ist ein input Element mit der type-Eigenschaft auf checkbox gesetzt, so wie hier:

<input type="checkbox">

Aber wie bei jedem input Element muss man einen Namen mit dem name Attribut definieren um es nutzbar zu machen -ohne Namen ist das Element nicht identifizierbar wenn es zum Senden der Daten an den Server kommt. Man kann auch das value Attribut bereits vorbefüllen. Das wird dann der Wert der an den Server gesendet wird, wenn eine Checkbox angewählt wurde. Hier ein Beispiel:

<input type="checkbox" name="nameOfChoice" value="1">

Wenn die Checkbox in dem Beispiel angewählt wurde und das Formular an den Server übermittelt wird, dann ist der Server in der Lage das Formular-Element "nameOfChoice" auszulesen und der Wert ist 1.

Ausgewählt oder nicht ausgewählt?

Bisher waren alle Checkboxen zu beginn nicht angewählt, also der Nutzer muss mit den Checkboxen interagieren um den Status von unchecked zu checked zu ändern. Das kann das sein was man meist möchte, aber manchmal möchte man ja auch das eine Checkbox direkt ausgewählt ist, um dem Nutzer entweder eine Auswahl vorzuschlagen oder wenn der Wert mit einem bestehenden Wert korrespondiert, z.B. zur Darstellung von Datenbankwerten. Auch hier ist es wieder sehr einfach umzusetzen indem man einfach das checked-Attribut zur Checkbox hinzufügt:

<input type="checkbox" name="nameOfChoice" value="1" checked>

Beim älteren xHTML musste jedem Attribut, auch boolean Attributen ein Wert zugewiesen werden. Das sah dann so aus:

<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />

Beide Wege sollten in modernen Browsern funktionieren, aber der erste Weg ist kürzer und mehr HTML5.

Mehrfach-Auswahl

Bisher waren die Checkboxen nur einfache Schalter, die festgelegt haben ob eine Option ein- oder ausgeschaltet ist. Sie erlauben aber auch eine Auswahl aus mehreren möglichen Optionen. Dazu das folgende Beispiel:

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>

Wir haben hier mehrere Checkboxen, aber alle haben den gleichen Namen ("favorite_pet") aber unterschiedliche Werte (z.B. "Dogs"). Wenn dieses Formular an den Server übermittelt wird werden alle Checkboxen durch einen einzelnen Namen representiert, aber der Wert ist aus einem array von 0-3. Wenn man hier Radio-Buttons verwendet hätte, hätte der Nutzer nur ein einziges Lieblingstier auswählen können, aber mit Checkboxen können hier entweder alle oder keiner oder nur ein paar ausgewählt werden.

Labels für Checkboxen

Beim testen des vorhergehenden Beispiels sieht man, dass man Text neben den Checkboxen platzieren kann, aber trotzdem beides unterschiedliche Teile sind. Man kann also nicht auf den Text klicken und die Checkbox wird ausgewählt. Das kann für die Nutzer sehr nervig sein, wenn sie immer genau auf die Schaltfläche klicken müssen. Aber zum Glück für uns als Entwickler, ist das sehr einfach zu lösen: Man benutzt einfach das label Element. Hier ein kleines Beispiel um mal die Unterschiede zu verdeutlichen:

<input type="checkbox" name="favorite_pet" value="Cats">Cats<br>  
<input type="checkbox" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label><br>

Es sind zwei Checkboxen - eine mit und eine ohne Label. Sie mögen vielleicht fast gleich aussehen, aber die Version mit dem Label kann angewählt werden wenn man die Schaltfläche direkt oder auch nur das Label anklickt. Das ist für den Nutzer sehr angenehm, wenn er am PC sitzt und mit der Maus arbeitet, aber vor allem wenn er ein Gerät mit Touchpad benutzt, da dort die kleine Checkbox manchmal schwer mit dem Finger zu treffen ist.

Das Label ist sehr einfach, es nutzt nur das for-Attribut um sich selbst an ein anderes Formularelement zu binden wo das id-Attribut entsprechend gesetzt wurde. (wie man sieht gibt es den Wert "dogs" an beiden Stellen.

Dynamisch mit Checkboxen arbeiten

Wie bei jedem anderen DOM Element kann man die Checkboxen mit JavaScript beeinflussen. Diesbezüglich könnte es interessant sein ob eine Checkbox angehakt ist oder nicht und man kann eine weitere Logik an das Element binden, z.B. zum prüfen wieviele Optionen ein Nutzer auswählen kann. Um einmal zu zeigen wie das funktioniert haben wir das vorherige Beispiel (den Lieblingstierwähler") mit ein wenig JavaScript Magie erweitert:

<form method="post" action="/Tests/Post">  
    <fieldset>  
    <legend>What is Your Favorite Pet?</legend>  
    <input type="checkbox" name="favorite_pet" value="Cats" onclick="return ValidatePetSelection();">Cats<br>  
    <input type="checkbox" name="favorite_pet" value="Dogs" onclick="return ValidatePetSelection();">Dogs<br>  
    <input type="checkbox" name="favorite_pet" value="Birds" onclick="return ValidatePetSelection();">Birds<br>  
        <br>  
    <input type="submit" value="Submit now">  
    </fieldset>  
</form>  

<script type="text/javascript">  
function ValidatePetSelection()  
{  
    var checkboxes = document.getElementsByName("favorite_pet");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 2)  
    {  
        alert("You can't select more than two favorite pets!");  
        return false;  
    }  
}  
</script>

Wir werden einmal kurz durchgehen was der Code macht. Wir haben das gleiche Beispiel wie zuvor, aber eienn Eventhandler zu jeder Checkbox hinzugefügt, der eine JavaScript Funktion (ValidatePetSelection) aufruft wenn der Nutzer diese anklickt. In der Funktion ermitteln wir die relevanten Checkboxen durch die getElementsByName Funktion und schauen dann ob diese ausgewählt sind oder nicht. Für jedes ausgewählte Element erhöhen wir unseren Zähler. Dieser Zähler wird dann überprüft und der Nutzer wird alarmiert sobald der Zähler größer 2 ist (es sollen nur zwei Tiere ausgewählt werden können) und gleichzeitig wird ein false zurückgegeben, was die Checkbox daran hindert sich auswählen zu lassen.

Das war nur ein einfaches Beispiel wie man mit Checkboxen und JavaScript arbeiten kann. Man kann noch so viel mehr damit machen, vor allem wenn man ein JavaScript Framework wie jQuery nutzt, da es die Arbeit mit DOM Elementen sehr vereinfacht.

Zusammenfassung

Checkboxen erlauben einem eine Mehrfachauswahl für den Nutzer bereitzustellen -entweder kann man sie nutzen um eine einfache Einstellung an- oder auszuschalten oder um eine wirkliche Mehrfachauswahl zu erlauben, wie in unserem Lieblingstier-Beispiel. Man sollte Labels benutzen um die Checkbox mit dem beschreibenden Text zusammenzufassen und dem Nutzer so eine größere Auswahlfläche bereitzustellen zur Auswahl der Checkbox. Das ist auch gut um unterstützende Technologie wie ScreenReader zu unterstützen, die meist durch Leute mit Sehschwächen genutzt werden.