<input type="checkbox">

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird auf der Clientseite nicht angezeigt, sondern nur auf dem Server; dies ist der value, der den mit dem name des Kontrollkästchens übermittelten Daten zugewiesen wird. Betrachten 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 übermittelt wird, lautet das Datennamen/Werte-Paar subscribe=newsletter.

Wenn das value-Attribut ausgelassen 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 gemeinsam haben, unterstützen checkbox-Eingaben die folgenden Attribute.

checked

Ein boolesches Attribut, das anzeigt, ob dieses Kontrollkästchen standardmäßig (bei Laden der Seite) angekreuzt ist. Es zeigt nicht an, ob dieses Kontrollkästchen derzeit angekreuzt 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. In diesem 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 speichert Firefox standardmäßig den dynamischen checked-Zustand eines <input> über Seitenladungen hinweg. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das alle <input>-Elemente gemeinsam haben; für Eingaben vom Typ checkbox hat es jedoch einen speziellen Zweck: Wenn ein Formular übermittelt wird, werden nur Kontrollkästchen, die derzeit angekreuzt sind, an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Wenn der value-Wert nicht anders angegeben ist, ist er standardmäßig der String on. Dies wird im Abschnitt Wert oben veranschaulicht.

Wir haben bereits die grundlegendste Verwendung von Kontrollkästchen oben behandelt. Lassen Sie uns jetzt die anderen gängigen Funktionen und Techniken im Zusammenhang mit Kontrollkästchen betrachten, die Sie benötigen.

Das unten gezeigte Beispiel 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 einfach alle separat behandeln, wie oben gezeigt. Wenn sie jedoch alle miteinander verwandt sind, sind die Dinge nicht ganz so einfach.

Im folgenden Demo-Beispiel fügen wir mehrere Kontrollkästchen hinzu, 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>

In diesem Beispiel werden Sie sehen, dass wir jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen angekreuzt sind und dann das Formular übermittelt wird, erhalten Sie einen String von Namen/Werte-Paaren wie dieses: interest=coding&interest=music. Wenn dieser String den Server erreicht, müssen Sie ihn anders parsen als als assoziatives Array, sodass alle Werte, nicht nur der letzte Wert von interest, erfasst werden. Ein Beispiel für eine Technik, die in Python verwendet wird, finden Sie unter Handle Multiple Checkboxes with a Single Serverside Variable.

Um ein Kontrollkästchen standardmäßig als angekreuzt festzulegen, 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 eine wirklich nützliche Funktion von HTML-Formular-Labels, die es einfacher macht, die gewünschte Option anzuklicken, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

Über die Zugänglichkeit hinaus ist dies ein weiterer guter Grund, um <label>-Elemente korrekt in Ihren Formularen einzurichten.

Ein Kontrollkästchen kann sich in einem indeterminierten Zustand befinden. Dies wird über die HTMLInputElement-Eigenschaft indeterminate mittels JavaScript festgelegt (es kann nicht mit einem HTML-Attribut festgelegt werden):

inputInstance.indeterminate = true;

Wenn indeterminate true ist, hat das Kontrollkästchen in den meisten Browsern eine horizontale Linie im Kästchen (sieht 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 umfasst (die ebenfalls Kontrollkästchen sind). Wenn alle Unteroptionen angekreuzt sind, wird das übergeordnete Kontrollkästchen ebenfalls angekreuzt, und wenn sie alle nicht angekreuzt sind, wird das übergeordnete Kontrollkästchen nicht angekreuzt. Wenn eine oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, befindet sich das übergeordnete Kontrollkästchen im indeterminierten Zustand.

Dies kann im folgenden 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 ankreuzen oder abwählen, überprüft eine JavaScript-Funktion die Gesamtanzahl der angekreuzten Zutaten:

• Wenn keine angekreuzt sind, wird das Rezeptnamen-Kontrollkästchen auf nicht angekreuzt gesetzt.
• Wenn ein oder zwei angekreuzt sind, wird das Rezeptnamen-Kontrollkästchen auf indeterminate gesetzt.
• Wenn alle drei angekreuzt sind, wird das Rezeptnamen-Kontrollkästchen auf checked gesetzt.

In diesem Fall wird der indeterminate-Zustand verwendet, um anzugeben, dass das Sammeln der Zutaten begonnen hat, aber das Rezept noch nicht abgeschlossen 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 (angeboten für alle <input>s). Die meisten ValidityStates werden jedoch immer false sein. Wenn das Kontrollkästchen das required-Attribut hat, aber nicht angekreuzt 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 enthält standardmäßig mehr Optionen sowie ein "Andere"-Kontrollkästchen, das bei Ankreuzen ein Textfeld zum Eingeben eines Werts für die "Andere"-Option erscheinen lässt. 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 beinhaltet auch etwas CSS zur Verbesserung des Stylings.

• :checked, :indeterminate: CSS-Selektoren, mit denen Sie Kontrollkästchen basierend auf ihrem aktuellen Zustand stylen können
• HTMLInputElement: HTML DOM API, das das <input>-Element implementiert
• CSS-Eigenschaftskompatibilitätstabelle für Formularelemente