<input type="checkbox">

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird auf der Client-Seite nicht angezeigt, sondern auf dem Server ist dies der value, der den mit dem name des Kontrollkästchens übermittelten Daten zugeordnet 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 abgeschickt wird, lautet das Datenname/Werte-Paar subscribe=newsletter.

Wenn das value-Attribut weggelassen wird, ist der Standardwert für das Kontrollkästchen on, sodass die übermittelten Daten in diesem Fall subscribe=on lauten würden.

Zusätzlich zu den gemeinsamen 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 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, wird dieses Inhaltsattribut nicht aktualisiert. (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 enthalten, 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, falls kein value gesetzt ist. Anders als andere Browser behält Firefox standardmäßig den dynamischen checked-Zustand eines <input> über Seitenladungen hinweg bei. Verwenden Sie das autocomplete-Attribut, um dieses Feature zu steuern.

value

Das value-Attribut ist eines, das alle <input>s teilen; jedoch dient es bei Eingaben des Typs checkbox einem besonderen Zweck: Wenn ein Formular übermittelt wird, werden nur Kontrollkästchen, die derzeit aktiviert sind, an den Server gesendet, 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 Wert oben demonstriert.

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

Das obige Beispiel enthält nur ein Kontrollkästchen; in realen Szenarien werden Sie wahrscheinlich auf mehrere Kontrollkästchen treffen. Wenn sie völlig unabhängig voneinander sind, können Sie sie alle separat behandeln, wie oben gezeigt. Wenn sie jedoch alle zusammenhängen, sind die Dinge nicht ganz so einfach.

Zum Beispiel umfassen wir im folgenden Demo mehrere Kontrollkästchen, um dem Benutzer zu ermöglichen, seine Interessen zu wä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 sehen Sie, dass wir jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen aktiviert und das Formular dann übermittelt wird, erhalten Sie eine Zeichenfolge von Name/Wert-Paaren, die so aussieht: interest=coding&interest=music. Wenn diese Zeichenfolge den Server erreicht, müssen Sie sie anders als als assoziatives Array parsen, damit alle Werte, nicht nur der letzte Wert von interest, erfasst werden. Für eine Technik, die mit Python verwendet wird, siehe zum Beispiel Mehrere Kontrollkästchen mit einer einzigen Serverside-Variable behandeln.

Um ein Kontrollkästchen standardmäßig aktiviert zu machen, geben Sie ihm 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 ein Kontrollkästchen umschalten können, indem Sie auf das zugehörige <label>-Element sowie auf das Kontrollkästchen selbst klicken. Dies ist ein sehr nützliches Feature von HTML-Formularbezeichnungen, das es einfacher macht, die gewünschte Option, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones, auszuwählen.

Abgesehen von der Zugänglichkeit gibt es einen weiteren guten Grund, <label>-Elemente richtig einzurichten.

Ein Kontrollkästchen kann sich in einem indeterminierten Zustand befinden. Dies wird über die HTMLInputElement-Objekteigenschaft indeterminate mittels 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 Kästchen (es sieht ein bisschen wie ein Bindestrich oder Minuszeichen aus), anstatt 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 "besitzt" (die ebenfalls Kontrollkästchen sind). Wenn alle Unteroptionen aktiviert sind, ist das besitzende Kontrollkästchen ebenfalls aktiviert, und wenn sie alle deaktiviert sind, ist das besitzende Kontrollkästchen deaktiviert. Wenn eine oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, befindet sich das besitzende Kontrollkästchen im indeterminierten Zustand.

Dies kann man im untenstehenden Beispiel sehen (danke an CSS Tricks für die Inspiration). In diesem Beispiel behalten wir den Überblick über die Zutaten, die wir für ein Rezept sammeln. Wenn Sie das Kontrollkästchen einer Zutat (de)aktivieren, überprüft eine JavaScript-Funktion die Gesamtzahl der aktivierten Zutaten:

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

In diesem Fall wird der Zustand indeterminate 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;
  }
}

Kontrollkästchen unterstützen Validierung (beim Einsatz bei allen <input>-Elementen). Jedoch werden die meisten ValidityState-Elemente immer false sein. Wenn das Kontrollkästchen das required-Attribut hat, jedoch nicht aktiviert ist, dann 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, wenn aktiviert, 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 etwas CSS, um das Styling zu verbessern.

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