<input type='checkbox'>

Note: Radio-Buttons sind Checkboxes ähnlich, haben jedoch einen wichtigen Unterschied — gleichnamige Radio-Buttons werden zu einer Gruppe zusammengefasst, in der jeweils nur ein Radio-Button ausgewählt werden kann, während Checkboxes ermöglichen, einzelne Werte ein- und auszuschalten. Wenn mehrere gleichnamige Steuerelemente existieren, erlauben Radio-Buttons, dass eines ausgewählt wird, während Checkboxes die Auswahl mehrerer Werte erlauben.

Ein String, der den Wert der Checkbox darstellt. Dieser wird auf der Client-Seite nicht angezeigt, sondern auf dem Server ist dies der value, der den mit dem name der Checkbox übermittelten Daten zugeordnet 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 name von subscribe und einen value von newsletter. Wenn das Formular eingereicht wird, wird das Datenpaar Name/Wert subscribe=newsletter sein.

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

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

checked

Ein boolean Attribut, das angibt, ob diese Checkbox standardmäßig angehakt ist (wenn die Seite geladen wird). Es zeigt nicht an, ob diese Checkbox derzeit angehakt ist: Wenn der Zustand der Checkbox geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked IDL-Attribut des HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert einer Checkbox nur dann in den übermittelten Daten enthalten, wenn die Checkbox derzeit checked ist. In diesem Fall wird der Wert des value-Attributes der Checkbox als Eingabewert gemeldet, oder on, wenn kein value gesetzt ist. Anders als andere Browser bewahrt Firefox standardmäßig den dynamischen checked-Zustand eines <input> über Seitennachladungen hinweg. Verwenden Sie das autocomplete Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das allen <input> gemeinsam ist; allerdings dient es bei Eingaben vom Typ checkbox einem besonderen Zweck: Wenn ein Formular abgeschickt wird, werden nur Checkboxes, die derzeit angehakt sind, an den Server übertragen, und der gemeldete Wert ist der Wert des value-Attributes. Wenn das value-Attribut nicht anders spezifiziert ist, ist es standardmäßig der String on. Dies wird im Abschnitt Value oben demonstriert.

Die grundlegendste Verwendung von Checkboxes haben wir bereits oben behandelt. Schauen wir uns nun die anderen gebräuchlichen Checkbox-bezogenen Funktionen und Techniken an, die Sie benötigen werden.

Das oben gezeigte Beispiel enthält nur eine Checkbox; in realen Situationen werden Sie wahrscheinlich auf mehrere Checkboxes stoßen. Wenn sie völlig unabhängig sind, können Sie sie einfach alle separat behandeln, wie oben gezeigt. Wenn sie jedoch miteinander in Beziehung stehen, sind die Dinge nicht ganz so einfach.

Zum Beispiel enthalten wir im folgenden Demo mehrere Checkboxes, um den Benutzer seine Interessen auswählen zu lassen (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 sehen Sie, dass wir jeder Checkbox denselben name gegeben haben. Wenn beide Checkboxen angehakt und dann das Formular abgeschickt werden, erhalten Sie eine Zeichenfolge mit Name/Wert-Paaren wie folgt: interest=coding&interest=music. Wenn diese Zeichenfolge den Server erreicht, müssen Sie sie anders als ein assoziatives Array parsen, damit alle Werte erfasst werden, nicht nur der letzte Wert von interest. Eine Technik, die mit Python verwendet wird, ist zum Beispiel im Artikel Handle Multiple Checkboxes with a Single Serverside Variable beschrieben.

Um eine Checkbox standardmäßig angehakt zu machen, geben Sie ihr 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 eine Checkbox umschalten können, indem Sie auf ihr zugeordnetes <label>-Element klicken, sowie auf die Checkbox selbst. Dies ist eine sehr nützliche Funktion von HTML-Formularbeschriftungen, die es einfacher macht, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinen Bildschirmen wie Smartphones.

Uber die Zugänglichkeit hinaus ist dies ein weiterer guter Grund, die <label>-Elemente in Ihren Formularen richtig einzurichten.

Eine Checkbox kann sich in einem indeterminierten Zustand befinden. Dieser wird mit der HTMLInputElement-Objekteigenschaft indeterminate über JavaScript gesetzt (er kann nicht mit einem HTML-Attribut gesetzt werden):

inputInstance.indeterminate = true;

Wenn indeterminate auf true gesetzt ist, hat die Checkbox in den meisten Browsern eine horizontale Linie im Kästchen (sie sieht in der Regel wie ein Bindestrich oder Minuszeichen aus) anstelle eines Häkchens/Kreuzes.

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

Dies kann im unten stehenden Beispiel gesehen werden (dank an CSS-Tricks für die Inspiration). In diesem Beispiel halten wir einen Überblick über 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 angehakten Zutaten:

• Wenn keine angehakt sind, ist das Kontrollkästchen für den Rezeptnamen nicht angehakt.
• Wenn ein oder zwei angehakt sind, ist das Kontrollkästchen für den Rezeptnamen indeterminate.
• Wenn alle drei angehakt sind, ist das Kontrollkästchen für den Rezeptnamen checked.

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

Checkboxes unterstützen Validierung (angeboten für alle <input>). Jedoch sind die meisten der ValidityStates immer false. Wenn die Checkbox das required-Attribut hat, aber nicht angehakt ist, dann wird ValidityState.valueMissing true sein.

Das folgende Beispiel ist eine erweiterte Version des "mehrere Checkboxes"-Beispiels, das wir oben gesehen haben – es hat mehr Standardoptionen plus ein "andere" Checkbox, die bei Aktivierung ein Textfeld erscheinen lässt, um einen Wert für die "andere" Option einzugeben. Dies wird mit einem einfachen JavaScript-Block erreicht. Das Beispiel enthält implizite Labels, wobei das <input> direkt im <label> enthalten ist. 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 die Gestaltung zu verbessern.

• :checked, :indeterminate: CSS-Selektoren, mit denen Sie Checkboxes basierend auf ihrem aktuellen Zustand stylen können
• HTMLInputElement: HTML-DOM-API, die das <input>-Element implementiert
• Kompatibilitätstabelle für CSS-Eigenschaften bei Formularelementen