Ausführbare HTML-Docs: HTML Checkbox

Q: Wie erstelle ich eine Checkbox in HTML?

Nimm in einem Label: I agree . Durch das Label wird auch der Text anklickbar.

Q: Wie ist eine Checkbox standardmäßig angehakt?

Füg das Attribut checked hinzu: . Es zählt seine Anwesenheit, checked="false" hakt sie also trotzdem an. In JavaScript setzt du box.checked = true oder false.

Q: Wie lese ich den Wert einer Checkbox in JavaScript aus?

Lies box.checked, das true oder false ist. box.value ist der Wert, den sie senden würde, und er bleibt gleich, egal ob die Box angehakt ist oder nicht. Hör auf das Event change, um auf das Umschalten zu reagieren.

Q: Wie ändere ich die Farbe einer Checkbox?

Setz accent-color an ihr: input[type=checkbox] { accent-color: #16a34a; }. Für ein komplett eigenes Aussehen setzt du appearance: none und zeichnest Kasten und Häkchen selbst mit CSS.

So erstellst du eine Checkbox in HTML

Eine Checkbox ist ein <input type="checkbox">. Setz sie mit ihrem Text in ein <label>, damit auch ein Klick auf den Text sie umschaltet. Hak eine oder beide Boxen an und drück auf Save, um zu sehen, was das Formular sendet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Im Anfangszustand sendet das Formular nur updates=on. Zwei Regeln erklären das:

Eine angehakte Box sendet name=value. Die zweite Box hat keinen value, sie sendet also den Standard, on.
Eine nicht angehakte Box sendet gar nichts. Nicht newsletter=no, keinen leeren Wert: Der Name fehlt in den Daten.

checked im HTML legt den Anfangszustand fest. Wie bei jedem booleschen Attribut zählt seine Anwesenheit: checked="false" hakt die Box trotzdem an.

Checkbox-Attribute

Attribut	Macht
`name`	Der Schlüssel, der beim Anhaken gesendet wird
`value`	Was beim Anhaken gesendet wird (Standard `on`)
`checked`	Angehakt, wenn die Seite lädt
`required`	Das Formular wird erst abgesendet, wenn diese Box angehakt ist
`disabled`	Lässt sich nicht umschalten und wird nicht gesendet

Eine Gruppe von Checkboxen

Für „wähle beliebig viele davon“ gibst du jeder Box denselben name und einen anderen value. Pack sie in ein <fieldset> mit einer <legend>, damit die Gruppe einen Namen hat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

Das Formular sendet topic=html und topic=css: zweimal denselben Namen. Die meisten Server-Frameworks können das als Liste lesen. PHP ist die Ausnahme: Es behält nur den letzten Wert, außer der Name endet mit eckigen Klammern, name="topic[]". In JavaScript gibt new FormData(form).getAll('topic') ['html', 'css'] zurück.

Einen Wert senden, wenn die Box nicht angehakt ist

Wenn der Server ein ausdrückliches „Nein“ braucht, setz vor die Checkbox ein verstecktes Input mit demselben Namen. Nicht angehakt wird nur der versteckte Wert gesendet; angehakt werden beide gesendet, und der Server nimmt den letzten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Drück auf Continue: Das Formular verweigert das Absenden, bis die Box für die Bedingungen angehakt ist, weil sie required ist. Dann sendet es marketing=no und terms=accepted, oder mit angehakter erster Box marketing=no, marketing=yes und terms=accepted. Frameworks wie Rails erzeugen genau dieses Paar mit verstecktem Input. Prüf, wie dein Server einen wiederholten Namen liest, bevor du dich darauf verlässt.

Alle auswählen und der Zustand indeterminate

Eine Checkbox hat ein drittes Aussehen, einen Strich, für „einige, aber nicht alle“. Es gibt ihn nur in JavaScript: Setz box.indeterminate = true. Eine Box „Alle auswählen“ verwendet ihn, wenn einige der Boxen, die sie steuert, angehakt sind:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate ändert nur das Aussehen (und was Screenreader ansagen: „gemischt“ oder „teilweise aktiviert“). Darunter ist die Box immer noch entweder angehakt oder nicht, und das sendet das Formular. Ein Klick auf eine Box im Zustand indeterminate entfernt den Strich und schaltet sie um.

Nimm das Event change, um auf eine Checkbox zu reagieren, und lies box.checked für ihren Zustand. box.value ändert sich beim Umschalten nicht.

Checkboxen stylen

Die schnellste Änderung ist accent-color, das die native Checkbox umfärbt und ihr ganzes Verhalten erhält. Für ein komplett anderes Aussehen entfernt appearance: none die native Darstellung, und du kannst das Input wie jeden Kasten stylen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

Die eigene Box ist immer noch eine echte Checkbox: Sie schaltet bei Klick und Leertaste um, wird mit dem Formular gesendet und als Checkbox angesagt. Zeichne sie mit :checked und behalte einen :focus-visible-Stil, denn ohne die native Darstellung gibt es keinen Fokusrahmen, den du nicht selbst hinzugefügt hast.

Ein Toggle Switch

Ein Schalter ist eine Checkbox, die „jetzt an oder aus“ bedeutet statt „dies mit einbeziehen“. Zeichne ihn mit appearance: none und füg role="switch" hinzu, damit Screenreader einen Schalter ansagen, der an oder aus ist, statt einer Checkbox, die angehakt ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start platziert den Knopf vom Zeilenanfang aus, auf Seiten, die von rechts nach links laufen, gleitet der Schalter also in die andere Richtung, wie es sein soll. Für gruppierte Ja/Nein-Auswahlen, bei denen nur eine gewählt werden kann, siehe HTML Radio Button.

Häufige Fehler

false für eine nicht angehakte Box erwarten. Es wird nichts gesendet. Behandle einen fehlenden Namen auf dem Server als „aus“ oder füg das versteckte Input hinzu.
checked="false". Das hakt die Box trotzdem an. Entferne das Attribut.
Eine Checkbox ohne Label oder mit Text daneben, der kein <label> ist. Die kleine Box wird zur einzigen Klickfläche, und Screenreader sagen „Kontrollkästchen“ ohne Namen an. Siehe HTML Label.
value vergessen, sodass jede Box einer Gruppe on sendet und der Server sie nicht unterscheiden kann.
box.value lesen, um zu sehen, ob sie angehakt ist. Nimm box.checked.
Checkboxen für „wähle eins“. Dafür sind Radio Buttons da.

Häufig gestellte Fragen

Wie erstelle ich eine Checkbox in HTML?

Nimm <input type="checkbox"> in einem Label: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. Durch das Label wird auch der Text anklickbar.

Wie ist eine Checkbox standardmäßig angehakt?

Füg das Attribut checked hinzu: <input type="checkbox" name="news" checked>. Es zählt seine Anwesenheit, checked="false" hakt sie also trotzdem an. In JavaScript setzt du box.checked = true oder false.

Welchen Wert sendet eine nicht angehakte Checkbox?

Keinen. Eine nicht angehakte Checkbox fehlt komplett in den gesendeten Daten. Eine angehakte sendet ihren value oder on, wenn sie keinen value hat. Wenn der Server ein ausdrückliches „Nein“ braucht, setz vor die Checkbox ein verstecktes Input mit demselben Namen.

Wie lese ich den Wert einer Checkbox in JavaScript aus?

Lies box.checked, das true oder false ist. box.value ist der Wert, den sie senden würde, und er bleibt gleich, egal ob die Box angehakt ist oder nicht. Hör auf das Event change, um auf das Umschalten zu reagieren.

Wie ändere ich die Farbe einer Checkbox?

Setz accent-color an ihr: input[type=checkbox] { accent-color: #16a34a; }. Für ein komplett eigenes Aussehen setzt du appearance: none und zeichnest Kasten und Häkchen selbst mit CSS.

Verwandte Konzepte