<input type="checkbox">

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird auf der Client-Seite nicht angezeigt, aber auf dem Server ist dies der value, der den mit dem name des Kontrollkästchens übermittelten Daten zugewiesen wird. Schauen Sie sich folgendes Beispiel an:

<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, ist das Daten-Namens/Wert-Paar subscribe=newsletter.

Wenn 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 alle <input>-Elemente teilen, unterstützen checkbox-Eingaben die folgenden Attribute.

checked

Ein boolesches Attribut, das angibt, ob dieses Kontrollkästchen standardmäßig markiert ist (wenn die Seite geladen wird). Es gibt nicht an, ob dieses Kontrollkästchen derzeit markiert 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 in den übermittelten Daten aufgenommen, wenn das Kontrollkästchen derzeit checked ist. Ist dies der Fall, wird der Wert des value-Attributs des Kontrollkästchens als Eingabewert gemeldet oder on, wenn kein value festgelegt ist. Im Gegensatz zu anderen Browsern behält Firefox standardmäßig den dynamischen überprüften 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 eine spezielle Bedeutung für Eingaben vom Typ checkbox: Wenn ein Formular übermittelt wird, werden nur die Kontrollkästchen, die derzeit markiert sind, an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Falls das value nicht anders 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 oben behandelt. Schauen wir uns nun die anderen gängigen, mit Kontrollkästchen verbundenen Funktionen und Techniken an, die Sie benötigen werden.

Das Beispiel, das wir oben gesehen haben, 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 separat behandeln, wie oben gezeigt. Wenn sie jedoch alle zusammenhängen, ist es nicht ganz so einfach.

In der folgenden Demo fügen wir beispielsweise mehrere Kontrollkästchen ein, die es dem Benutzer ermöglichen, seine Interessen zu wä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 jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen markiert sind und dann das Formular übermittelt wird, erhalten Sie einen String von Namens/Wert-Paaren, der so aussieht: 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. Eine Technik, die mit Python verwendet wird, finden Sie unter Handle Multiple Checkboxes with a Single Serverside Variable.

Um ein Kontrollkästchen standardmäßig anzukreuzen, geben Sie ihm das checked-Attribut. Sehen Sie sich das folgende Beispiel an:

<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 vielleicht bemerkt, dass Sie ein Kontrollkästchen umschalten können, indem Sie auf sein zugehöriges <label>-Element sowie auf das Kontrollkästchen selbst klicken. Dies ist eine wirklich nützliche Funktion von HTML-Formularbeschriftungen, die es einfacher macht, die gewünschte Option zu klicken, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

Neben der Zugänglichkeit ist dies ein weiterer guter Grund, label-Elemente in Ihren Formularen ordnungsgemäß einzurichten.

Ein Kontrollkästchen kann in einem unbestimmten Zustand sein. Dies wird durch das HTMLInputElement-Objekt mit der indeterminate-Eigenschaft ü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 in der Box (es sieht ein wenig wie ein Bindestrich oder Minuszeichen aus), anstelle eines Häkchens/Hakens.

Es gibt nicht viele Anwendungsfälle für diese Eigenschaft. Der häufigste ist, wenn ein Kontrollkästchen vorhanden ist, das „Unteroptionen“ (die ebenfalls Kontrollkästchen sind) „besitzt“. Wenn alle Unteroptionen markiert sind, ist auch das besitzende Kontrollkästchen markiert, und wenn sie alle nicht markiert sind, ist das besitzende Kontrollkästchen nicht markiert. Wenn eines oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, befindet sich das besitzende Kontrollkästchen im unbestimmten Zustand.

Dies kann im folgenden Beispiel gesehen werden (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 aktivieren oder deaktivieren, ü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 ein 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 Zustand indeterminate verwendet, um zu sagen, dass das Sammeln der Zutaten begonnen hat, das Rezept jedoch noch nicht komplett 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>s). Die meisten ValidityStates werden jedoch immer false sein. Wenn das Kontrollkästchen das required-Attribut hat, aber nicht markiert ist, dann wird ValidityState.valueMissing true sein.

Das folgende Beispiel ist eine erweiterte Version des oben gesehenen Beispiels mit "mehrere Kontrollkästchen" — es hat mehr Standardoptionen sowie ein "anderes" Kontrollkästchen, das, wenn es markiert ist, 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 im <label>. Das Texteingabefeld, ohne sichtbares Label, enthält das aria-label-Attribut, das seinen zugänglichen Namen bereitstellt. Dieses Beispiel enthält auch ein wenig CSS, um die Gestaltung zu verbessern.

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