<input type="checkbox">

Probieren Sie es aus

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Wert

Ein String, der den Wert des Kontrollkästchens repräsentiert. Dieser wird nicht auf der Client-Seite angezeigt, sondern auf dem Server ist dies der value, der den mit dem name des Kontrollkästchens gesendeten 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 gesendet wird, wird das Daten-Namen/Wert-Paar subscribe=newsletter sein.

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

Zusätzliche Attribute

Zusätzlich zu den allgemeinen Attributen, die alle <input>-Elemente gemeinsam haben, unterstützen checkbox-Eingaben die folgenden Attribute.

checked

Ein boolean-Attribut, das angibt, ob dieses Kontrollkästchen standardmäßig (beim Laden der Seite) angehakt ist. Es zeigt nicht an, ob dieses Kontrollkästchen derzeit angehakt ist: Wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked-IDL-Attribut von HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert eines Kontrollkästchens nur in die gesendeten Daten aufgenommen, wenn das Kontrollkästchen derzeit checked ist. Wenn dies der Fall ist, wird der Wert des value-Attributs des Kontrollkästchens als Eingabewert gemeldet, oder on, wenn kein value festgelegt ist. Anders als andere Browser behält Firefox standardmäßig den dynamischen checked-Zustand über Seitenladezyklen hinweg. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das alle <input>-Elemente teilen; allerdings hat es eine besondere Bedeutung für Eingaben vom Typ checkbox: Wenn ein Formular gesendet wird, werden nur Kontrollkästchen, die derzeit angehakt sind, an den Server gesendet, und der gemeldete Wert ist der Wert des value-Attributs. Wenn nicht anders festgelegt, ist der Standardwert on. Dies wird im Abschnitt Wert oben erläutert.

switch

Ein boolean-Attribut, das nur für checkbox-Eingaben gilt. Wenn vorhanden, zeigt es an, dass das Kontrollkästchen einen Ein/Aus-switch statt eines normalen checkbox repräsentiert. Es verändert das Erscheinungsbild des checkbox-Steuerungselements, aber das zugrundeliegende Verhalten bleibt das gleiche wie bei einem normalen checkbox.

Hinweis: Dieses Attribut erlaubt es Benutzeragenten, switch-ARIA-Semantiken zu unterstützenden Technologien bereitzustellen — ohne, dass Dokumente explizit role="switch" angeben müssen. Das Markup und die API sind denen von Checkboxes ähnlich, außer dass die :indeterminate-Pseudoklasse niemals übereinstimmt.

Warnung: Dieses Attribut ist noch experimentell und hat begrenzte Unterstützung in Browsern. Das Attribut wird in nicht unterstützten Browsern ignoriert.

Verwendung von Checkbox-Eingaben

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

Umgang mit mehreren Kontrollkästchen

Das oben 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 mit ihnen allen separat umgehen, wie oben gezeigt. Wenn sie jedoch alle miteinander in Beziehung stehen, ist es nicht ganz so einfach.

Zum Beispiel, im folgenden Demo haben wir mehrere Kontrollkästchen eingeschlossen, um dem Benutzer zu erlauben, 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 den gleichen name gegeben haben. Wenn beide Kontrollkästchen angekreuzt sind und dann das Formular gesendet wird, erhalten Sie eine Zeichenfolge von Namen/Wert-Paaren, die so übermittelt werden: interest=coding&interest=music. Wenn diese Zeichenfolge den Server erreicht, müssen Sie sie anders als als assoziatives Array parsen, sodass alle Werte, nicht nur der letzte Wert, von interest erfasst werden. Für eine mit Python verwendete Technik, siehe Handle Multiple Checkboxes with a Single Serverside Variable, zum Beispiel.

Kontrollkästchen standardmäßig ankreuzen

Um ein Kontrollkästchen standardmäßig angekreuzt zu machen, 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>

Switch als Kontrollkästchen

Das folgende Beispiel zeigt, wie man ein Kontrollkästchen wie einen Ein/Aus-Schalter aussehen und agieren lässt.

<form>
  <fieldset>
    <legend>Adjust your setting</legend>
    <div>
      <label for="theme">Dark mode</label>
      <input type="checkbox" name="theme" id="theme" switch checked />
    </div>
    <div>
      <label for="notifications">Notifications</label>
      <input type="checkbox" name="notifications" id="notifications" switch />
    </div>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Bereitstellen eines größeren Trefferbereichs für Ihre Kontrollkästchen

In den obigen Beispielen haben Sie möglicherweise bemerkt, dass Sie ein Kontrollkästchen durch Klicken auf das zugehörige <label>-Element sowie auf das Kontrollkästchen selbst umschalten können. Dies ist ein wirklich nützliches Merkmal von HTML-Formularetiketten, das es einfacher macht, die gewünschte Option zu klicken, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

Abgesehen von der Barrierefreiheit ist dies ein weiterer guter Grund, <label>-Elemente in Ihren Formularen richtig einzurichten.

Kontrollkästchen im unbestimmten Zustand

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

inputInstance.indeterminate = true;

Wenn indeterminate true ist, hat das Kontrollkästchen eine horizontale Linie im Kästchen (in den meisten Browsern sieht es etwas 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 verfügbar ist, das eine Anzahl von Unteroptionen "besitzt" (welche ebenfalls Kontrollkästchen sind). Wenn alle Unteroptionen angehakt sind, ist auch das besitzende Kontrollkästchen angehakt, und wenn sie alle nicht angehakt sind, ist das besitzende Kontrollkästchen nicht angehakt. Wenn eine oder mehr der Unteroptionen einen anderen Zustand als die anderen haben, ist 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 halten wir die Zutaten im Überblick, die wir für ein Rezept sammeln. Wenn Sie das Kontrollkästchen einer Zutat an- oder abwählen, überprüft eine JavaScript-Funktion die Gesamtzahl der angehakten Zutaten:

• Wenn keine angehakt sind, wird das Kontrollkästchen des Rezeptnamens auf nicht angehakt gesetzt.
• Wenn ein 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 benutzt, um zu zeigen, 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;
  }
}

<form>
  <fieldset>
    <legend>Complete the recipe</legend>
    <div>
      <input type="checkbox" id="enchantment" name="enchantment" />
      <label for="enchantment">Enchantment table</label>
      <ul>
        <li>
          <input type="checkbox" id="book" name="ingredient" value="book" />
          <label for="book">Book</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="diamonds"
            name="ingredient"
            value="diamonds" />
          <label for="diamonds">Diamonds (x2)</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="obsidian"
            name="ingredient"
            value="obsidian" />
          <label for="obsidian">Obsidian (x4)</label>
        </li>
      </ul>
    </div>
  </fieldset>
</form>

Validierung

Kontrollkästchen unterstützen die Validierung (die allen <input>s angeboten wird). Jedoch werden die meisten ValidityStates immer false sein. Wenn das Kontrollkästchen das required-Attribut hat, aber nicht angehakt ist, dann wird ValidityState.valueMissing true sein.

Beispiele

Das folgende Beispiel ist eine erweiterte Version des oben gesehenen "mehrere Kontrollkästchen"-Beispiels — es hat mehr Standardoptionen, plus ein "andere" Kontrollkästchen, welches, wenn angehakt, ein Textfeld erscheinen lässt, um einen Wert für die "andere" Option einzugeben. Dies wird mit einem kurzen JavaScript-Block erreicht. Das Beispiel schließt implizite Labels ein, mit dem <input> direkt innerhalb des <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 zur Verbesserung des Stylings.

HTML

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        Coding
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        Music
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        Art
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        Sports
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        Cooking
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        Other
      </label>
      <input
        type="text"
        id="otherValue"
        name="other"
        aria-label="Other interest" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :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