<input type="checkbox">

Ein String, der den Wert der Checkbox darstellt. Dieser wird nicht auf der Clientseite angezeigt, sondern auf dem Server ist dies der value, der für die mit dem name der Checkbox übermittelten Daten angegeben wird. Nehmen Sie folgendes Beispiel:

<form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" /> <label for="subscribeNews">Subscribe to newsletter?</label> </div> <div> <button type="submit">Subscribe</button> </div> </form> 

In diesem Beispiel haben wir einen Namen subscribe und einen Wert newsletter. Wenn das Formular übermittelt wird, wird das Datenpaar Name/Wert subscribe=newsletter sein.

Wenn das value-Attribut ausgelassen wird, beträgt der Standardwert für die Checkbox on, sodass die übermittelten Daten in diesem Fall subscribe=on wären.

Zusätzlich zu den allgemeinen Attributen, die alle <input>-Elemente teilen, unterstützen checkbox-Eingaben die folgenden Attribute.

checked

Ein boolesches Attribut, das angibt, ob diese Checkbox standardmäßig (beim Laden der Seite) markiert ist. Es zeigt nicht an, ob diese Checkbox derzeit markiert ist: Wenn sich der Zustand der Checkbox ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked-IDL-Attribut des HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen wird nur der Wert einer Checkbox in die übermittelten Daten einbezogen, wenn die Checkbox derzeit checked ist. Ist dies der Fall, wird der Wert des value-Attributs der Checkbox als der Wert der Eingabe berichtet, oder on, wenn kein value festgelegt ist. Im Gegensatz zu anderen Browsern speichert Firefox standardmäßig den dynamischen markierten Zustand eines <input> über Seitenladungen hinweg. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das alle <input> gemeinsam haben; jedoch dient es einem speziellen Zweck bei Eingaben des Typs checkbox: Wenn ein Formular übermittelt wird, werden nur die Checkboxen, die derzeit markiert sind, an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Wenn das value nicht anderweitig angegeben ist, ist es standardmäßig der String on. Dies wird im Abschnitt Value oben demonstriert.

Wir haben bereits die grundlegendste Nutzung von Checkboxen oben behandelt. Schauen wir uns nun die anderen häufig checkbox-bezogenen Funktionen und Techniken an, die Sie benötigen.

Das oben gezeigte Beispiel enthielt nur eine Checkbox; in realen Situationen werden Sie wahrscheinlich auf mehrere Checkboxen stoßen. Wenn sie völlig unabhängig sind, können Sie einfach mit ihnen allen separat umgehen, wie oben gezeigt. Wenn sie jedoch alle zusammenhängen, sind die Dinge nicht ganz so einfach.

Zum Beispiel enthalten wir im folgenden Demo mehrere Checkboxen, um dem Benutzer zu ermöglichen, seine Interessen auszuwählen (siehe die vollständige Version im Abschnitt Beispiele).

<fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" /> <label for="coding">Coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music" /> <label for="music">Music</label> </div> </fieldset> 

In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox denselben name gegeben haben. Wenn beide Checkboxen markiert sind und dann das Formular übermittelt wird, erhalten Sie einen String von Name/Wert-Paaren, die so übermittelt werden: interest=coding&interest=music. Wenn dieser String den Server erreicht, müssen Sie ihn anders als ein assoziatives Array parsen, sodass alle Werte, nicht nur der letzte Wert, von interest erfasst werden. Zu einer Technik, die mit Python verwendet wird, siehe Handle Multiple Checkboxes with a Single Serverside Variable, zum Beispiel.

Um eine Checkbox standardmäßig markiert zu machen, geben Sie ihr das checked-Attribut. Siehe das folgende Beispiel:

<fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" checked /> <label for="coding">Coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music" /> <label for="music">Music</label> </div> </fieldset> 

In den obigen Beispielen haben Sie möglicherweise bemerkt, dass Sie eine Checkbox durch Klicken auf das zugehörige <label>-Element sowie auf die Checkbox selbst umschalten können. Dies ist eine wirklich nützliche Funktion von HTML-Formular-Labels, die es einfacher macht, die gewünschte Option zu klicken, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

Über die Barrierefreiheit hinaus ist dies ein weiterer guter Grund, <label>-Elemente in Ihren Formularen korrekt einzurichten.

Eine Checkbox kann sich in einem indeterminierten Zustand befinden. Dies wird über die indeterminate-Eigenschaft des HTMLInputElement-Objekts mit JavaScript gesetzt (es kann nicht mit einem HTML-Attribut eingestellt werden):

inputInstance.indeterminate = true; 

Wenn indeterminate true ist, hat die Checkbox in den meisten Browsern eine horizontale Linie im Kasten (sie sieht etwas wie ein Bindestrich oder Minuszeichen aus) anstelle eines Häkchens.

Es gibt nicht viele Anwendungsfälle für diese Eigenschaft. Der häufigste ist, wenn eine Checkbox vorhanden ist, die eine Anzahl von Unteroptionen (die auch Checkboxen sind) „besitzt“. Wenn alle Unteroptionen markiert sind, ist die übergeordnete Checkbox ebenfalls markiert, und wenn sie alle nicht markiert sind, ist die übergeordnete Checkbox nicht markiert. Wenn eine der Unteroptionen einen anderen Zustand als die anderen hat, befindet sich die übergeordnete Checkbox im indeterminierten Zustand.

Dies kann im folgenden Beispiel gesehen werden (Dank an CSS Tricks für die Inspiration). In diesem Beispiel verfolgen wir die Zutaten, die wir für ein Rezept sammeln. Wenn Sie das Kontrollkästchen einer Zutat an- oder abwählen, überprüft eine JavaScript-Funktion die Gesamtzahl der markierten Zutaten:

• Wenn keine markiert sind, wird das Kontrollkästchen des Rezeptnamens auf nicht markiert gesetzt.
• Wenn eine oder zwei markiert sind, wird das Kontrollkästchen des Rezeptnamens auf indeterminate gesetzt.
• Wenn alle drei markiert sind, wird das Kontrollkästchen des Rezeptnamens auf checked gesetzt.

In diesem Fall wird der indeterminate-Zustand verwendet, um anzugeben, dass das Sammeln der Zutaten begonnen hat, aber das Rezept noch nicht vollständig ist.

const overall = document.querySelector("#enchantment"); const ingredients = document.querySelectorAll("ul input"); overall.addEventListener("click", (e) => { e.preventDefault(); }); for (const ingredient of ingredients) { ingredient.addEventListener("click", updateDisplay); } function updateDisplay() { let checkedCount = 0; for (const ingredient of ingredients) { if (ingredient.checked) { checkedCount++; } } if (checkedCount === 0) { overall.checked = false; overall.indeterminate = false; } else if (checkedCount === ingredients.length) { overall.checked = true; overall.indeterminate = false; } else { overall.checked = false; overall.indeterminate = true; } } 

Checkboxen unterstützen Validierung (die allen <input>s angeboten wird). Jedoch werden die meisten ValidityState immer false sein. Wenn die Checkbox das required-Attribut hat, aber nicht markiert ist, dann wird ValidityState.valueMissing true sein.

Das folgende Beispiel ist eine erweiterte Version des oben gesehenen "mehrere Checkboxen"-Beispiels — es enthält mehr Standardoptionen plus eine "andere"-Checkbox, die beim Markieren ein Textfeld erscheinen lässt, um einen Wert für die "andere" Option einzugeben. Dies wird mit einem kurzen JavaScript-Block erreicht. Das Beispiel enthält implizite Labels, mit dem <input> direkt innerhalb des <label>. Das Texteingabefeld, ohne sichtbares Label, enthält das aria-label-Attribut, das den zugänglichen Namen bereitstellt. Dieses Beispiel enthält auch etwas CSS zur Verbesserung der Gestaltung.

• :checked, :indeterminate: CSS-Selektoren, mit denen Sie Checkboxen basierend auf ihrem aktuellen Zustand stylen können
• HTMLInputElement: HTML-DOM API, das das <input>-Element implementiert