HTML checked-Attribut

Das HTML-Attribut checked legt fest, dass ein <input>-Element beim ersten Laden der Seite ausgewählt (aktiviert) sein soll. Es gilt nur für <input type="checkbox"> und <input type="radio">.

checked ist ein boolean-Attribut. Bei einem boolean-Attribut zählt allein seine Anwesenheit — checked, checked="" und checked="checked" sind gleichwertig und bedeuten alle „wahr". Es lässt sich nicht auf „falsch" setzen, indem man checked="false" schreibt; um ein Steuerelement standardmäßig deaktiviert zu lassen, lässt man das Attribut einfach vollständig weg.

Radiobuttons vs. Checkboxen

Die beiden Eingabetypen teilen das Attribut checked, verhalten sich jedoch unterschiedlich:

Radiobuttons, die denselben name haben, bilden eine Gruppe mit gegenseitigem Ausschluss. In dieser Gruppe kann jeweils höchstens eine Option aktiviert sein; checked bei mehr als einem Radio in einer Gruppe anzugeben ist daher sinnlos — nur der letzte gewinnt. Es ist gute Praxis, einen Radio vorab zu aktivieren, damit die Gruppe stets einen Wert hat.
Checkboxen sind unabhängig voneinander. Beliebig viele (auch keine) können gleichzeitig aktiviert sein, sodass checked bei beliebig vielen angegeben werden darf.

Syntax

<input type="checkbox|radio" checked>
<input type="checkbox|radio" checked="checked">

Beispiel: Radiobuttons

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="post">
      <input type="radio" name="game" value="football" checked /> Football
      <input type="radio" name="game" value="basketball" /> Basketball
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Probier es selbst »

Der Radio-Button football ist beim Laden der Seite vorausgewählt. Da beide Eingaben name="game" teilen, wird Football automatisch abgewählt, wenn man Basketball auswählt.

Beispiel: Checkboxen

Hier sind mehrere Checkboxen gleichzeitig vorab aktiviert — etwas, das mit einer Radio-Gruppe nicht möglich ist:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Pick your toppings</h2>
    <form action="/form/submit" method="post">
      <label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
      <label><input type="checkbox" name="topping" value="mushrooms" checked /> Mushrooms</label>
      <label><input type="checkbox" name="topping" value="olives" /> Olives</label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Das Einschließen jedes Steuerelements in ein <label> macht den Text anklickbar und wird von Screenreadern zusammen mit dem Zustand der Checkbox vorgelesen (z. B. „Cheese, Kontrollkästchen, aktiviert"), was die Barrierefreiheit verbessert.

checked mit JavaScript setzen und auslesen

Das HTML-Attribut legt nur den anfänglichen Zustand fest. Um ein Steuerelement nach dem Laden der Seite zu aktivieren, zu deaktivieren oder seinen Zustand auszulesen, verwendet man die live aktualisierte DOM-Eigenschaft checked, die einen boolean-Wert liefert:

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="subscribe" /> Subscribe
    <button onclick="toggle()">Toggle</button>
    <p id="status"></p>

    <script>
      const box = document.getElementById("subscribe");

      // Set the state programmatically
      box.checked = true;

      function toggle() {
        // Read the live state, then flip it
        box.checked = !box.checked;
        document.getElementById("status").textContent =
          "Checked: " + box.checked;
      }
    </script>
  </body>
</html>

Das `checked`-Attribut vs. die `checked`-Eigenschaft

Diese beiden sind leicht zu verwechseln:

Das HTML-Attribut checked beschreibt den anfänglichen (Standard-)Zustand, der im Markup festgelegt ist. Im DOM wird es durch die Eigenschaft defaultChecked gespiegelt und ändert sich nach dem Laden der Seite nie mehr — auch nicht, nachdem der Benutzer geklickt hat.
Die DOM-Eigenschaft element.checked spiegelt den aktuellen, live Zustand wider. Sie liest man aus, um zu erfahren, ob die Box gerade aktiviert ist, und man weist ihr einen Wert zu, um ihn zu ändern.

// <input type="checkbox" id="box" checked>
const box = document.getElementById("box");
box.click();                 // user unchecks it

box.checked;                 // false  → current state
box.defaultChecked;          // true   → original HTML attribute
box.hasAttribute("checked"); // true   → the attribute is still present

Verhalten von Checkboxen beim Absenden von Formularen

Beim Absenden eines Formulars senden nur aktivierte Steuerelemente ihr name/value-Paar. Eine deaktivierte Checkbox wird aus dem Anfrage-Body vollständig weggelassen — sie erscheint nicht als leerer Wert. Lässt der Benutzer die Olives-Checkbox im obigen Beispiel deaktiviert, enthält der POST-Body topping=cheese&topping=mushrooms ohne jede Erwähnung von olives.

Eine Checkbox ohne explizites value-Attribut sendet den Wert on, wenn sie aktiviert ist. Wenn der Server erkennen muss, dass eine Checkbox deaktiviert wurde, fügt man ein verstecktes Feld mit demselben name vor der Checkbox als Fallback ein.

Übung

Was bewirkt das HTML-Attribut 'checked'?

Es legt fest, dass eine Checkbox oder ein Radiobutton beim ersten Laden der Seite ausgewählt sein soll.Es setzt den Standard-Textwert eines Eingabeelements.Es gibt dem Benutzer einen Hinweis auf den erwarteten Wert eines Eingabeelements.Es zeigt an, dass eine Checkbox oder ein Radiobutton nicht bedient werden kann.Es legt fest, dass ein Texteingabefeld beim Laden der Seite mit einem bestimmten Text vorausgefüllt sein soll.Es sperrt den aktuellen Zustand dauerhaft, sodass JavaScript ihn nicht ändern kann.