<input type="checkbox">

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

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

input {
  margin: 0.4rem;
}

Note: Radioknöpfe sind ähnlich wie Kontrollkästchen, haben jedoch einen wichtigen Unterschied — gleichnamige Radioknöpfe werden zu einer Gruppe zusammengefasst, in der jeweils nur ein Radioknopf ausgewählt werden kann, während mit Kontrollkästchen einzelne Werte ein- und ausgeschaltet werden können. Wo mehrere gleichnamige Steuerelemente vorhanden sind, ermöglichen Radioknöpfe, dass einer ausgewählt wird, während mit Kontrollkästchen mehrere Werte ausgewählt werden können.

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird clientseitig nicht angezeigt, aber auf dem Server ist dies der value, der den mit dem name des Kontrollkästchens übermittelten Daten zugewiesen 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 abgesendet wird, ist das Daten-Namens-Wert-Paar subscribe=newsletter.

Falls das value-Attribut weggelassen wurde, ist der Standardwert für das Kontrollkästchen on, sodass die übermittelten Daten in diesem Fall subscribe=on wären.

Zusätzlich zu den allgemeinen Attributen, die von allen <input>-Elementen geteilt werden, unterstützen checkbox-Eingaben die folgenden Attribute.

checked

Ein Boolesches Attribut, das anzeigt, ob dieses Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit aktiviert ist: Wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked IDL-Attribut des HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen wird der Wert eines Kontrollkästchens nur dann in den übermittelten Daten enthalten, wenn das Kontrollkästchen derzeit checked ist. Falls dies der Fall ist, wird der Wert des value-Attributs des Kontrollkästchens als Eingabewert übermittelt, oder on, wenn kein value gesetzt ist. Anders als andere Browser behält Firefox standardmäßig den dynamischen Aktivierungszustand eines <input> über Seitenladungen bei. Verwenden Sie das autocomplete-Attribut, um diese Funktionalität zu steuern.

value

Das value-Attribut wird von allen <input>-Elementen geteilt; es hat jedoch eine spezielle Bedeutung für Eingaben des Typs checkbox: Wenn ein Formular übermittelt wird, werden nur Kontrollkästchen, die derzeit aktiviert sind, an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Falls das value nicht anderweitig spezifiziert ist, ist es standardmäßig der String on. Dies wird im Abschnitt Wert oben demonstriert.

Wir haben bereits die grundlegendste Verwendung von Kontrollkästchen behandelt. Schauen wir uns nun die anderen häufigen Merkmale und Techniken im Zusammenhang mit Kontrollkästchen an, die Sie benötigen werden.

Das oben gezeigte Beispiel enthielt nur ein einziges Kontrollkästchen; in realen Situationen werden Sie wahrscheinlich auf mehrere Kontrollkästchen stoßen. Wenn sie völlig unabhängig voneinander sind, können Sie einfach alle separat behandeln, wie oben gezeigt. Sind sie jedoch alle miteinander verbunden, ist die Handhabung nicht ganz so einfach.

Zum Beispiel fügen wir in der folgenden Demo mehrere Kontrollkästchen ein, um dem Benutzer die Auswahl seiner Interessen zu ermöglichen (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>

Sie werden sehen, dass wir jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen aktiviert sind und das Formular dann gesendet wird, erhalten Sie einen String der Namens-Wert-Paare wie folgt: interest=coding&interest=music. Wenn dieser String den Server erreicht, müssen Sie ihn anders als ein assoziatives Array analysieren, damit alle Werte, nicht nur der letzte Wert von interest, erfasst werden. Für eine mit Python verwendete Technik siehe Handle Multiple Checkboxes with a Single Serverside Variable, zum Beispiel.

Um ein Kontrollkästchen standardmäßig aktiviert zu machen, geben Sie ihm das checked-Attribut. Siehe folgendes 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 ein Kontrollkästchen durch Klicken auf sein zugehöriges <label>-Element sowie auf das Kontrollkästchen selbst umschalten können. Dies ist eine wirklich nützliche Funktion von HTML-Formularlabels, die es einfacher macht, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinen Bildschirmen wie Smartphones.

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

Ein Kontrollkästchen kann sich in einem indermedinate-Zustand befinden. Dies wird mit der indeterminate-Eigenschaft des HTMLInputElement-Objekts über JavaScript gesetzt (es kann nicht mit einem HTML-Attribut gesetzt werden):

inputInstance.indeterminate = true;

Wenn indeterminate true ist, hat das Kontrollkästchen in den meisten Browsern eine horizontale Linie im Feld (es sieht ein wenig aus wie ein Minuszeichen) anstelle eines Häkchens.

Es gibt nicht viele Anwendungsfälle für diese Eigenschaft. Der gebräuchlichste ist ein Kontrollkästchen, das eine Anzahl von Unteroptionen (die ebenfalls Kontrollkästchen sind) "besitzt". Wenn alle Unteroptionen aktiviert sind, ist auch das Kontrollkästchen aktiviert, und wenn alle deaktiviert sind, ist das Kontrollkästchen deaktiviert. Wenn eine oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, befindet sich das Kontrollkästchen im indeterminaten Zustand.

Dies kann man im folgenden Beispiel sehen (danke 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 Gesamtanzahl der ausgewählten Zutaten:

• Wenn keine ausgewählt sind, wird das Kontrollkästchen des Rezeptnamens auf deaktiviert gesetzt.
• Wenn eine oder zwei ausgewählt sind, ist das Kontrollkästchen des Rezeptnamens auf indeterminate gesetzt.
• Wenn alle drei ausgewählt sind, ist das Kontrollkästchen des Rezeptnamens auf checked gesetzt.

In diesem Fall wird also der indeterminate-Zustand verwendet, um anzuzeigen, dass das Sammeln der Zutaten begonnen hat, das Rezept aber 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;
  }
}

Kontrollkästchen unterstützen die Validierung (angeboten für alle <input>-Elemente). Die meisten ValidityState-Zustände werden jedoch immer false sein. Hat das Kontrollkästchen das required-Attribut, ist jedoch nicht aktiviert, dann ist ValidityState.valueMissing true.

Das folgende Beispiel ist eine erweiterte Version des oben gesehenen „mehrere Kontrollkästchen“-Beispiels — es hat mehr Standardoptionen, plus ein „anderes“ Kontrollkästchen, das bei Aktivierung 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, wobei das <input> direkt innerhalb des <label> ist. Das Texteingabefeld, ohne sichtbares Label, enthält das aria-label-Attribut, das dessen zugänglichen Namen bereitstellt. Dieses Beispiel enthält auch etwas CSS, um das Styling zu verbessern.

• :checked, :indeterminate: CSS-Selektoren, die es ermöglichen, Kontrollkästchen basierend auf ihrem aktuellen Zustand zu stylen
• HTMLInputElement: HTML DOM API, die das <input>-Element implementiert