<input>-Elemente des Typscheckbox werden standardmäßig als Kästchen dargestellt, die markiert (angehakt) werden, wenn sie aktiviert sind, ähnlich wie Sie es in einem offiziellen Formular einer Regierungsbehörde sehen könnten. Das genaue Erscheinungsbild hängt von der Betriebssystemkonfiguration ab, unter der der Browser ausgeführt wird. In der Regel ist dies ein Quadrat, aber es kann abgerundete Ecken haben. Eine Checkbox ermöglicht es Ihnen, einzelne Werte zur Übermittlung in einem Formular auszuwählen (oder nicht).

Probieren Sie es aus

<fieldset>  <legend>Choose your monster's features:</legend>  <div>    <input type="checkbox" name="scales" checked />    <label for="scales">Scales</label>  </div>  <div>    <input type="checkbox" name="horns" />    <label for="horns">Horns</label>  </div></fieldset>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

Wert

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

<form>  <div>    <input      type="checkbox"           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 Namensubscribe und einen Wertnewsletter. Wenn das Formular übermittelt wird, wird das Datenpaar Name/Wertsubscribe=newsletter sein.

Wenn dasvalue-Attribut ausgelassen wird, beträgt der Standardwert für die Checkboxon, sodass die übermittelten Daten in diesem Fallsubscribe=on wären.

Zusätzliche Attribute

Zusätzlich zu denallgemeinen Attributen, die alle<input>-Elemente teilen, unterstützencheckbox-Eingaben die folgenden Attribute.

checked

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

Hinweis:Im Gegensatz zu anderen Eingabesteuerungen wird nur der Wert einer Checkbox in die übermittelten Daten einbezogen, wenn die Checkbox derzeitchecked ist. Ist dies der Fall, wird der Wert desvalue-Attributs der Checkbox als der Wert der Eingabe berichtet, oderon, wenn keinvalue festgelegt ist.Im Gegensatz zu anderen Browsern speichert Firefox standardmäßigden dynamischen markierten Zustand eines<input> über Seitenladungen hinweg. Verwenden Sie dasautocomplete-Attribut, um diese Funktion zu steuern.

value

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

Verwendung von Checkbox-Eingaben

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.

Umgang mit mehreren Checkboxen

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 AbschnittBeispiele).

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

In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox denselbenname 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, voninterest erfasst werden. Zu einer Technik, die mit Python verwendet wird, sieheHandle Multiple Checkboxes with a Single Serverside Variable, zum Beispiel.

Markieren von Kästchen standardmäßig

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

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

Bereitstellung einer größeren Trefferfläche für Ihre Checkboxen

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.

Indeterminierten Zustand von Checkboxen

Eine Checkbox kann sich in einemindeterminierten Zustand befinden. Dies wird über dieindeterminate-Eigenschaft desHTMLInputElement-Objekts mit JavaScript gesetzt (es kann nicht mit einem HTML-Attribut eingestellt werden):

inputInstance.indeterminate = true;

Wennindeterminatetrue 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 anCSS 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 aufindeterminate gesetzt.
• Wenn alle drei markiert sind, wird das Kontrollkästchen des Rezeptnamens aufchecked gesetzt.

In diesem Fall wird derindeterminate-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;  }}

Validierung

Checkboxen unterstützenValidierung (die allen<input>s angeboten wird). Jedoch werden die meistenValidityState immerfalse sein. Wenn die Checkbox dasrequired-Attribut hat, aber nicht markiert ist, dann wirdValidityState.valueMissingtrue sein.

Beispiele

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 dasaria-label-Attribut, das den zugänglichen Namen bereitstellt. Dieses Beispiel enthält auch etwas CSS zur Verbesserung der Gestaltung.

HTML

<form>  <fieldset>    <legend>Choose your interests</legend>    <div>      <label>        <input type="checkbox" name="interest" value="coding" />        Coding      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="music" />        Music      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="art" />        Art      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="sports" />        Sports      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="cooking" />        Cooking      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="other" />        Other      </label>      <input        type="text"               name="other"        aria-label="Other interest" />    </div>    <div>      <button type="submit">Submit form</button>    </div>  </fieldset></form>

CSS

html {  font-family: sans-serif;}form {  width: 600px;  margin: 0 auto;}div {  margin-bottom: 10px;}fieldset {  background: cyan;  border: 5px solid blue;}legend {  padding: 10px;  background: blue;  color: cyan;}

JavaScript

const otherCheckbox = document.querySelector("#other");const otherText = document.querySelector("#otherValue");otherText.style.visibility = "hidden";otherCheckbox.addEventListener("change", () => {  if (otherCheckbox.checked) {    otherText.style.visibility = "visible";    otherText.value = "";  } else {    otherText.style.visibility = "hidden";  }});

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :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