Schnellstart: Hinzufügen von Kontrollkästchen-Steuerelementen (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Erfahren Sie, wie Sie checkbox-Steuerelemente erstellen. Mit Kontrollkästchen können Sie den Benutzern eine Binärauswahl, eine oder mehrere Optionen, die sich nicht gegenseitig ausschließen, oder eine gemischte Auswahl anbieten.

Voraussetzungen

Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen

Erstellen eines Kontrollkästchens

Zum Erstellen eines checkbox-Elements erstellen Sie ein input-Element und legen dessen type-Attribut auf "checkbox" fest. Fügen Sie Ihren Text für das checkbox-Element nach dem schließenden Tag des input-Elements hinzu.

Tipp Schließen Sie ein checkbox-Element beim Hinzufügen in ein label-Element ein, um den Bereich zu vergrößern, in dem auf die Benutzerinteraktion reagiert wird. Damit wird die Nutzung des Kontrollkästchens auf Geräten mit Fingereingabe erleichtert.

Standardmäßig ist ein Kontrollkästchen deaktiviert (leer), bis ein Benutzer darauf klickt. Verwenden Sie das checked-Attribut, wenn das checkbox-Element von Beginn an aktiviert sein soll. In diesem Beispiel werden vier Kontrollkästchen erstellt, und das checked-Attribut wird verwendet, um das zweite Kontrollkästchen als aktiviert zu kennzeichnen.


.controlGroup
{
    margin: 0px 0px 20px 0px;
    padding: 0px;
    border: 0px;
}

.controlGroupName
{
    font:normal normal normal 11pt/15pt "Segoe UI Semilight";
    font-size: 11pt; 
    margin:0px 0px 10px 0px;
    padding:0px;
    border: 0px;
    position:relative;
    vertical-align:top;
    display:block;
}

.verticalStacking input[type="checkbox"]
{
    margin-bottom: 16px;
}

<div style="margin: 20px">
<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>
    <label>
        <input id="option1" type="checkbox" class="checkboxExample1"  />Option 1
    </label>
    <br />
    <label>
        <input id="option2" type="checkbox" class="checkboxExample1" checked />Option 2
    </label>
    <br />
    <label>
        <input id="option3" type="checkbox" class="checkboxExample1" />Option 3
    </label>
    <br />
    <label>
        <input id="option4" type="checkbox" class="checkboxExample1" />Option 4
    </label>
    </fieldset>
</div>

Wenn Sie den Code ausführen, sind die Optionen 1, 3 und 4 deaktiviert, aber die Option 2 ist aktiviert.

Vier Kontrollkästchen

Ermitteln der Aktivierung eines Kontrollkästchens

Für das checkbox-Element werden die gleichen Ereignisse wie für andere input-Elemente unterstützt, einschließlich des click-Ereignisses. Das checkbox-Element ist jedoch für Statusinformationen gedacht und löst normalerweise keine Aktion aus (mit Ausnahme eines unbestimmten Kontrollkästchens, das im nächsten Abschnitt behandelt wird). Anstatt das click-Ereignis des Kontrollkästchens zu behandeln und sofort eine Aktion basierend auf dem checked-Zustand des Kontrollkästchens auszuführen, wird der checkbox-Zustand normalerweise gelesen, wenn Benutzer auf eine Schaltfläche der Art "Absenden" klicken, um eine Reihe von Optionen zu bestätigen. (Verwenden Sie stattdessen ein ToggleSwitch-Steuerelement, wenn Sie eine Aktion ausführen möchten.)

Um zu ermitteln, ob ein Kontrollkästchen aktiviert ist, verwenden Sie dessen checked-Eigenschaft. In diesem Beispiel wird ein button-Steuerelement erstellt, mit dem die checked-Werte der Kontrollkästchen-Steuerelemente angezeigt werden, die im vorherigen Beispiel erstellt wurden.

function evaluateCheckboxState(eventInfo) {
    var outputDiv = document.getElementById("checkedStateOutput");
    var output = "<ul>";
    WinJS.Utilities.query(".checkboxExample1").forEach(function (checkbox) {
        output += "<li>" + checkbox.id + " checked: " + checkbox.checked + "</li>"; 
    }); 
    outputDiv.innerHTML = output + "</ul>"; 

}

WinJS.Namespace.define("CheckboxExamples",
    { evaluateCheckboxState: evaluateCheckboxState });

Dies sieht wie folgt aus, wenn Sie den Code ausführen und auf die Schaltfläche klicken:

Vier Kontrollkästchen

Erstellen eines unbestimmten Kontrollkästchens

Wenn sich eine Option auf mehrere Objekte bezieht, können Sie mit einem Kontrollkästchen festlegen, ob die Option für alle Objekte, für einige Objekte oder für gar kein Objekt gültig ist. Wenn sich die Option auf einige, jedoch nicht alle Objekte bezieht, verwenden Sie den Zustand indeterminate des Kontrollkästchens, um eine gemischte Auswahl darzustellen.

Sie können die indeterminate-Eigenschaft nur in JavaScript festlegen. In HTML ist kein "indeterminate"-Attribut enthalten, das Sie festlegen können.

Hinweis Wenn Sie die indeterminate-Eigenschaft eines Kontrollkästchens ändern, wird nicht automatisch dessen checked-Wert geändert.

In diesem Beispiel wird das Kontrollkästchen "Select all" (Alles auswählen) erstellt, mit dem eine Gruppe untergeordneter Kontrollkästchen-Steuerelemente aktiviert oder deaktiviert werden kann (Optionen 1 bis 4).

<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>

    <label>
        <input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all
    </label>
    <div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">
        <label>
            <input id="Checkbox1" type="checkbox" class="checkboxExample2"  />Option 1
        </label>
        <br />
        <label>
            <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
        </label>
        <br />
        <label>
            <input id="Checkbox3" type="checkbox" class="checkboxExample2" />Option 3
        </label>
        <br />
        <label>
            <input id="Checkbox4" type="checkbox" class="checkboxExample2" />Option 4
        </label>
    </div>

</fieldset>

Die Kontrollkästchen-Steuerelemente sehen wie folgt aus:

Ein Kontrollkästchen im unbestimmten Zustand

Im Beispiel wird das click-Ereignis des Kontrollkästchens selectAll so behandelt, dass beim Klicken darauf die checkAll-Funktion ausgelöst wird.

<input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all

Mit der checkAll-Funktion werden alle anderen Kontrollkästchen-Steuerelemente aktiviert oder deaktiviert, wenn Sie das Kontrollkästchen selectAll aktivieren bzw. deaktivieren.

function checkAll(eventInfo) {

    var options = document.getElementsByClassName("checkboxExample2");
    for (var i = 0; i < options.length; i++) {
        options[i].checked = event.srcElement.checked;
    }
}

Die updateCheckboxes-Funktion wird aufgerufen, wenn Benutzer auf eines der untergeordneten Kontrollkästchen-Steuerelemente klicken.

<div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">

Damit wird der Aktivierungszustand der einzelnen Kontrollkästchen ermittelt und das Kontrollkästchen selectAll aktualisiert.

Falls alle untergeordneten Kontrollkästchen aktiviert sind, wird der indeterminate-Zustand des Kontrollkästchens selectAll auf false und sein checked-Wert auf true festgelegt.
Falls alle untergeordneten Kontrollkästchen deaktiviert sind, wird der indeterminate-Zustand des Kontrollkästchens selectAll auf false und sein checked-Wert auf false festgelegt.
Falls einige untergeordnete Kontrollkästchen aktiviert und einige deaktiviert sind, wird der indeterminate-Zustand des Kontrollkästchens selectAll auf true und sein checked-Wert auf false festgelegt.

function updateCheckboxes(eventInfo) {
    var options = document.getElementsByClassName("checkboxExample2");
    var selectedCount = 0;
    for (var i = 0; i < options.length; i++) {
        if (options[i].checked) {
            selectedCount++;
        }
    }

    // Update the selectAll checkbox
    // to reflect the state of the child checkboxes.
    var selectAll = document.getElementById("selectAll"); 
    if (options.length === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = true;
    } else if (0 === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = false;
    } else {
        selectAll.indeterminate = true;
        //selectAll.checked = false;
    }
}

Im nächsten Teil des Beispiels wird WinJS.Namespace.define verwendet, um checkAll und updateCheckboxes öffentlich zu machen.

WinJS.Namespace.define("CheckboxExamples",
    {
        checkAll: checkAll,
        updateCheckboxes: updateCheckboxes
    });

Danach muss noch ein weiterer Schritt ausgeführt werden. Die zweite Option befindet sich zu Beginn im checked-Zustand:

<label>
    <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
</label>

Das Kontrollkästchen selectAll befindet sich zu Beginn im deaktivierten Zustand (kein Häkchen), und die updateCheckboxes-Methode wird erst aufgerufen, wenn ein Benutzer auf ein Kontrollkästchen klickt. Wenn der Beispielcode ausgeführt wird, ist das Kontrollkästchen selectAll also deaktiviert, während es eigentlich den unbestimmten Zustand aufweisen soll:

Das selectAll-Kontrollkästchen sollte sich im unbestimmten Zustand befinden.

Fügen Sie einen Aufruf von updateCheckboxes hinzu, wenn die Seite geladen wird, um dieses Problem zu beheben.

Falls sich der Code in einem PageControl-Element befindet, können Sie die ready-Methode zum Aufrufen von updateCheckboxes verwenden.
Falls der Code in der Datei default.js der App enthalten ist, können Sie den activated-Ereignishandler zum Aufrufen von updateCheckboxes verwenden.
In beiden Fällen können Sie auch das DOMContentLoaded-Ereignis behandeln und updateCheckboxes mithilfe des Handlers aufrufen.

In diesem Beispiel wird ein PageControl-Element verwendet, sodass updateCheckboxes über die ready-Methode aufgerufen wird.

WinJS.UI.Pages.define("/pages/checkbox/checkbox.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        // TODO: Initialize the page here.

        CheckboxExamples.updateCheckboxes(); 
    },

    unload: function () {
        // TODO: Respond to navigations away from this page.
    },

    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in viewState.
    }
});

Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie checkbox-Steuerelemente erstellen, deren Zustand ermitteln und die indeterminate-Eigenschaft verwenden, um einen Zwischenzustand anzugeben.

Sehen Sie sich als Nächstes die Informationen unter So wird's gemacht: Formatieren von Kontrollkästchen-Steuerelementen an.

Freigeben über