Überprüfen Sie, ob das Kontrollkästchen mit jQuery aktiviert ist

Um den aktuellen Status eines Kontrollkästchens mit jQuery zu prüfen, lesen Sie dessen DOM-Eigenschaft checked aus. .prop('checked') dient als direkter Getter, .is(':checked') als Prüfung mit einem Selektor. Alternativ greifen Sie mit .get(0).checked oder [0].checked auf den ausgewählten DOM-Knoten zu. Das HTML-Attribut checked beschreibt den Anfangszustand des Kontrollkästchens; spätere Änderungen durch Benutzer werden darin nicht nachgeführt. (.get())

Prüfen, ob ein Kontrollkästchen mit direktem DOM-Zugriff aktiviert ist

Eine jQuery-Auswahl ist eine Sammlung der passenden Elemente. .get(0) gibt das erste zugrunde liegende DOM-Element zurück. Dessen Eigenschaft checked ist ein Boolean, der den aktuellen Status angibt. Der arrayartige Zugriff mit [0] bewirkt dasselbe. Verwenden Sie eine der beiden Formen nur, wenn die Auswahl das Kontrollkästchen enthält, dessen Status Sie prüfen möchten.

Führen Sie dieses Beispiel aus:

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

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

Auf einer Seite, auf der jQuery geladen ist, lautet die entsprechende Prüfung $("#terms").get(0).checked. Der folgende Browser-Quelltext zeigt dieses Muster mit einem Kontrollkästchen und einer Schaltfläche; er ist als Seitenquelltext angegeben und nicht als Laufzeitausgabe.

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

Wenn eine Auswahl mehr als ein Element enthalten kann, gibt .get(0) weiterhin nur den ersten Treffer zurück. Gibt es keinen Treffer, liefert Index null kein Kontrollkästchen, dessen Status ausgelesen werden könnte. Wenn Sie alle Treffer prüfen möchten, durchlaufen Sie die Sammlung oder verwenden Sie .is(':checked'), um zu testen, ob mindestens ein Treffer aktiviert ist.

Prüfen, ob ein Kontrollkästchen mit .prop() aktiviert ist

Mit .prop('checked') lesen Sie den aktuellen Aktivierungsstatus des ausgewählten Elements aus:

$("#terms").prop("checked")

Bei einem einzelnen Kontrollkästchen gibt dieser Getter true zurück, wenn es aktiviert ist, andernfalls false. Eine jQuery-Sammlung kann mehrere Elemente enthalten; der Getter liest die Eigenschaft des ersten Treffers aus. Wählen Sie ein bestimmtes Kontrollkästchen aus, wenn das Ergebnis genau dieses Steuerelements beschreiben soll.

Die Setter-Form ändert den aktuellen Zustand: $("#terms").prop("checked", true) aktiviert das Kontrollkästchen; mit false wird es deaktiviert. Verwenden Sie den Getter, wenn Sie den aktuellen Status abfragen, und den Setter, wenn Sie ihn ändern möchten. Dasselbe Muster mit Eigenschaften gilt für weitere aktuelle Eigenschaften von Steuerelementen, etwa disabled bei einer Schaltfläche. Die jQuery-Dokumentation zu .prop() erläutert den Zugriff auf Eigenschaften.

Prüfen, ob ein Kontrollkästchen mit .is() und :checked aktiviert ist

Der Selektor :checked trifft auf aktivierte Kontrollkästchen und Optionsfelder zu; siehe die jQuery-Dokumentation zu Selektoren. .is(':checked') gibt einen Boolean zurück, der angibt, ob mindestens ein Element in der ausgewählten jQuery-Sammlung diesem Selektor entspricht. Siehe die Dokumentation zu .is():

$("#terms").is(":checked")

Diese Formulierung eignet sich, wenn Sie wissen möchten, ob ein ausgewähltes Kontrollkästchen aktiviert ist. Zum Beispiel ist $("input[name='choice']").is(":checked") wahr, wenn mindestens ein Kontrollkästchen in der benannten Gruppe aktiviert ist. Der Selektor $("input:checked") erstellt dagegen eine jQuery-Sammlung mit allen aktivierten Eingabefeldern; für sich allein gibt er keinen Boolean zurück.

Geben Sie eine ID im Attributwert ohne Raute an: Verwenden Sie $("#terms") oder $("input[id='terms']"), nicht $("input[id='#terms']"). Die # gehört zur Syntax des ID-Selektors und nicht zum Wert des id-Attributs.

Häufige Anwendungsfälle für Kontrollkästchen mit jQuery

Diese Muster verwenden die aktuelle Eigenschaft checked und lassen sich an Ihre IDs, Klassen und Formularstruktur anpassen.

Nach ID oder Klasse auswählen

Verwenden Sie eine ID, wenn Sie ein bekanntes einzelnes Kontrollkästchen prüfen: $("#terms").prop("checked"). Bei einer Klasse, die eine Gruppe kennzeichnet, durchlaufen Sie die Treffer, um den Status jedes Steuerelements auszugeben:

Zum Beispiel durchläuft $(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); }); jeden Treffer. Achten Sie auf einer Seite darauf, dass die Klasse den Eingabefeldern für Kontrollkästchen zugewiesen ist und der Code erst ausgeführt wird, nachdem diese Elemente vorhanden sind. Innerhalb von .each() ist this das aktuelle DOM-Element; seine Eigenschaft checked bezieht sich daher auf das jeweilige Kontrollkästchen.

Ein Kontrollkästchen nur deaktivieren, wenn es aktiviert ist

Ein Setter kann ein Steuerelement direkt deaktivieren. Wenn Sie lediglich sicherstellen möchten, dass es deaktiviert ist, ist eine vorherige Prüfung daher nicht nötig:

$("#terms").prop("checked", false)

Soll eine weitere Aktion nur ausgeführt werden, wenn das Kontrollkästchen zuvor aktiviert war, prüfen Sie zuerst mit if ($("#terms").is(":checked")) { ... } und setzen Sie anschließend seine Eigenschaft auf false.

Prüfen, ob alle oder beliebige Kontrollkästchen einer Sammlung aktiviert sind

Bei einer Gruppe gibt .is(':checked') an, ob mindestens ein Element aktiviert ist. Wenn alle Elemente aktiviert sein müssen, vergleichen Sie die Anzahl der aktivierten Treffer mit der Gesamtzahl der Kontrollkästchen in der Gruppe:

Zum Beispiel berechnet const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked"); beide Ergebnisse.

Die Bedingung length > 0 sorgt dafür, dass „alle aktiviert“ falsch ist, wenn der Selektor keine Kontrollkästchen findet. Für eine Formulargruppe ist das meist die nützliche Auslegung. Legen Sie nur dann ausdrücklich eine andere Regel für leere Gruppen fest, wenn Ihre Anwendung sie benötigt.

Eine Senden-Schaltfläche abhängig von einem Kontrollkästchen aktivieren

Aktualisieren Sie die Schaltfläche, wenn sich der Status des Kontrollkästchens ändert. Warten Sie nicht auf einen Schaltflächenklick, der möglicherweise gar nicht möglich ist, weil die Schaltfläche deaktiviert ist:

Definieren Sie zum Beispiel const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));, binden Sie die Funktion mit $("#terms").on("change", update) an das Änderungsereignis und rufen Sie nach dem Binden einmal update() auf. So wird der Anfangszustand beim Laden der Seite übernommen und die Schaltfläche bleibt mit dem Kontrollkästchen synchron, wenn Benutzer es umschalten. Passen Sie #submit an das tatsächliche Sende-Steuerelement Ihres Formulars an.

Das HTML-Attribut checked legt den standardmäßigen Aktivierungszustand eines Kontrollkästchens beim Initialisieren der Seite fest. Die aktuelle DOM-Eigenschaft checked gibt seinen Zustand nach Benutzerinteraktionen oder Skriptänderungen wieder. .attr('checked') liest das Attribut aus; wenn Sie den aktuellen Zustand benötigen, verwenden Sie .prop('checked') oder .is(':checked'). .attr() und .prop() beantworten bei einem Kontrollkästchen somit unterschiedliche Fragen.