<input type="checkbox">

Note: Optionsfelder sind Kontrollkästchen ähnlich, jedoch mit einem wichtigen Unterschied – gleichnamige Optionsfelder sind zu einem Satz gruppiert, in dem jeweils nur ein Optionsfeld gleichzeitig ausgewählt werden kann, während Kontrollkästchen es erlauben, einzelne Werte ein- und auszuschalten. Wo mehrere gleichnamige Steuerungen existieren, erlauben Optionsfelder, dass eine ausgewählt wird, während Kontrollkästchen es erlauben, mehrere Werte auszuwählen.

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird nicht auf der Client-Seite angezeigt, sondern auf dem Server ist dies der value, der den Daten zugewiesen wird, die mit dem name des Kontrollkästchens eingereicht werden. Nehmen Sie das folgende 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 eingereicht wird, ist das Datenname/Wert-Paar subscribe=newsletter.

Wenn das value-Attribut weggelassen wird, ist der Standardwert für das Kontrollkästchen on, sodass die eingereichten 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 boolean-Attribut, das anzeigt, ob dieses Kontrollkästchen standardmäßig angehakt ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit angehakt ist: Wenn der Zustand des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked IDL-Attribut des HTMLInputElement wird aktualisiert.)

Hinweis: Anders als andere Eingabesteuerungen wird der Wert eines Kontrollkästchens nur in die übermittelten Daten einbezogen, wenn das Kontrollkästchen derzeit checked ist. Ist es das, wird der Wert des value-Attributs des Kontrollkästchens als Eingabewert angegeben, oder on, wenn kein value gesetzt ist. Anders als in anderen Browsern behält Firefox standardmäßig den dynamischen angehakten Zustand eines <input> über Seitenladevorgänge hinweg bei. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das alle <input>s teilen; es hat jedoch einen besonderen Zweck für Eingaben des Typs checkbox: Wenn ein Formular eingereicht wird, werden nur Kontrollkästchen, die derzeit angehakt sind, an den Server übermittelt, und der angegebene Wert ist der Wert des value-Attributs. Wenn der value nicht anderweitig angegeben wird, ist er standardmäßig die Zeichenfolge on. Dies wird im Abschnitt Wert oben demonstriert.

Wir haben die grundlegendste Verwendung von Kontrollkästchen oben behandelt. Schauen wir uns nun die anderen häufig verwendeten kontrollkästchenbezogenen Funktionen und Techniken an, die Sie benötigen.

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

Zum Beispiel, im folgenden Beispiel beinhalten wir mehrere Kontrollkästchen, um dem Benutzer zu erlauben, seine Interessen auszuwählen (sehen Sie 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 jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen aktiviert sind und dann das Formular eingereicht wird, erhalten Sie eine Zeichenfolge von Name/Wert-Paaren, die wie folgt eingereicht wird: interest=coding&interest=music. Wenn diese Zeichenfolge den Server erreicht, müssen Sie sie anders als ein assoziatives Array parsen, damit alle Werte, nicht nur der letzte Wert, von interest erfasst werden. Für eine Technik, die in Python verwendet wird, siehe Mehrere Kontrollkästchen mit einer einzigen serverseitigen Variablen behandeln, zum Beispiel.

Um ein Kontrollkästchen standardmäßig anzuhaken, versehen Sie es mit dem 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 ein Kontrollkästchen umschalten können, indem Sie auf das damit verbundene <label>-Element klicken, sowie auf das Kontrollkästchen selbst. Dies ist eine wirklich nützliche Funktion von HTML-Formularlabels, die es einfacher macht, die gewählte Option auszuwählen, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

Dies ist nicht nur aus Gründen der Barrierefreiheit wichtig, sondern auch ein guter Grund, <label>-Elemente in Ihren Formularen ordnungsgemäß einzurichten.

Ein Kontrollkästchen kann in einem unbestimmten Zustand sein. Dies wird mithilfe der indeterminate-Eigenschaft des HTMLInputElement-Objekts über JavaScript eingestellt (es kann nicht mithilfe eines HTML-Attributs festgelegt werden):

inputInstance.indeterminate = true;

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

Es gibt nicht viele Anwendungsfälle für diese Eigenschaft. Der häufigste ist, wenn ein Kontrollkästchen verfügbar ist, das eine Anzahl von Unteroptionen (die ebenfalls Kontrollkästchen sind) "besitzt". Wenn alle Unteroptionen angehakt sind, wird das besitzende Kontrollkästchen ebenfalls angehakt, und wenn sie alle nicht angehakt sind, wird das besitzende Kontrollkästchen nicht angehakt. Wenn eine oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, ist das besitzende Kontrollkästchen im unbestimmten Zustand.

Dies kann im untenstehenden Beispiel gesehen werden (dank 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 aktivieren oder deaktivieren, prüft eine JavaScript-Funktion die Gesamtzahl der angehakten Zutaten:

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

In diesem Fall wird 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 (die allen <input>s angeboten wird). Die meisten der ValidityStates werden jedoch immer false sein. Wenn das Kontrollkästchen das required-Attribut hat, aber nicht angehakt ist, wird ValidityState.valueMissing true sein.

Das folgende Beispiel ist eine erweiterte Version des "mehrere Kontrollkästchen" Beispiels, das wir oben gesehen haben — 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 im <label> liegt. Das Texteingabefeld ohne sichtbares Label enthält das aria-label-Attribut, das seinen zugänglichen Namen angibt. Dieses Beispiel enthält auch etwas CSS, um das Styling zu verbessern.

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