JavaScript Kontrollkästchen onChange

Mit dem change-Ereignis eines Kontrollkästchens kannst du reagieren, wenn sich sein Aktivierungszustand ändert. Den aktuellen booleschen Wert liest du über die Eigenschaft checked des Elements aus. Einen Handler kannst du über ein inline gesetztes onchange-Attribut anbinden, der Eigenschaft onchange des Elements zuweisen oder als change-Listener mit addEventListener registrieren.

Änderungen an Kontrollkästchen mit dem change-Ereignis behandeln

Bei einem Kontrollkästchen wird das change-Ereignis ausgelöst, wenn der Benutzer seinen Aktivierungszustand ändert; es wartet nicht darauf, dass das Element den Fokus verliert. Das Ereignis informiert deinen Code über die Änderung, während checked den aktuellen Zustand angibt. Wähle für ein Element eine der folgenden Varianten, damit klar ist, welcher Handler für die Reaktion zuständig ist.

Einen inline gesetzten onchange-Handler verwenden

Bei einem inline gesetzten Handler steht der Funktionsaufruf im HTML des Kontrollkästchens. In diesem Handler-Kontext verweist this auf das Kontrollkästchen selbst, sodass die Funktion dessen Eigenschaft checked direkt auslesen kann. Ein Label ordnet dem Steuerelement eine Beschreibung zu; der Ergebnisabsatz bietet Platz, um den Zustand anzuzeigen.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<label>
  <input type="checkbox" onchange="showState(this)">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  function showState(checkbox) {
    document.getElementById("result").textContent = checkbox.checked;
  }
</script>

Das HTML-Attribut onchange gibt an, welcher Handler aufgerufen werden soll. textContent gibt den booleschen Wert als einfachen Text aus. Für ein kleines Beispiel sind inline gesetzte Handler praktisch. Sie vermischen jedoch Verhalten und Markup und eignen sich weniger, wenn ein Projekt diese Bereiche getrennt hält.

Einen Handler der Eigenschaft onchange zuweisen

Wenn du den Handler in JavaScript unterbringen möchtest, gib dem Kontrollkästchen eine id, wähle es aus und weise seiner Eigenschaft onchange eine Funktion zu. Falls die Funktion einen Parameter deklariert, erhält sie das Ereignisobjekt. Ein Parameter ist nicht nötig, wenn die Funktion direkt das ausgewählte Element ausliest.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.onchange = function () {
    result.textContent = checkbox.checked;
  };
</script>

Durch die Zuweisung erhält das Element seinen Handler. Wird später derselben Eigenschaft eine andere Funktion zugewiesen, ersetzt sie die vorherige. Verwende deshalb einen Listener, wenn mehrere unabhängige Teile des Codes auf das Ereignis reagieren sollen.

Einen change-Listener mit addEventListener registrieren

addEventListener registriert einen Callback für das angegebene Ereignis. Auch bei dieser Variante erhält der Callback das Ereignisobjekt als Argument; event.currentTarget bezeichnet das Element, für das dieser Listener registriert wurde.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.addEventListener("change", function (event) {
    result.textContent = event.currentTarget.checked;
  });
</script>

Ein Listener lässt sich hinzufügen, ohne bereits an anderer Stelle registrierte Handler zu ersetzen. Verwende als erstes Argument für addEventListener den Ereignisnamen change, nicht onchange.

Den Zustand checked des Kontrollkästchens auslesen

Die Eigenschaft checked ist boolesch: Sie hat den Wert true, wenn das Kontrollkästchen ausgewählt ist, und false, wenn es nicht ausgewählt ist. Lies sie innerhalb des Handlers aus, um den Zustand nach der Änderung zu erhalten. Im Browser geben die Beispiele oben diesen Wert im Ergebnisbereich aus. Ersetze diese Zuweisung durch die Aktion, die deine Benutzeroberfläche benötigt, etwa das Aktivieren eines zugehörigen Steuerelements.

Dieses kleine JavaScript-Beispiel zeigt isoliert, wie sich der Zustand auslesen lässt. Die Browserbeispiele oben veranschaulichen, wie du diese Logik mit dem Ereignis eines tatsächlichen Kontrollkästchens verbindest.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

function showState(checkbox) {
  return checkbox.checked;
}

const checkbox = { checked: true };
console.log(showState(checkbox));

true

Das Beispiel gibt den booleschen Wert aus, den checked liefert. Das JavaScript-Beispiel ist eigenständig; die HTML-Ausschnitte sind Beispiele für eine Browserseite und werden hier nicht als ausgeführte Ausgabe gezeigt.