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

1. Überprüfen Sie, ob das Kontrollkästchen mit direkten DOM-Operationen aktiviert ist, indem Sie die Methode .get() verwenden
2. Überprüfen Sie, ob das Kontrollkästchen mit der Methode .prop() aktiviert ist
3. Überprüfen Sie, ob das Kontrollkästchen mit der Methode .is() aktiviert ist
4. Häufige Anwendungsfälle für die Überprüfung, ob das Kontrollkästchen mit jQuery aktiviert ist

In diesem Blogbeitrag lernen Sie verschiedene Methoden kennen, um jQuery-Kontrollkästchen zu aktivieren. Wir werden auch ihre Leistungsmetriken besprechen, damit Sie die beste Methode für jeden Anwendungsfall auswählen können.

Wir zeigen nützliche Shortcuts für gängige Anwendungsfälle von Checkboxen. Wir haben auch einen Tipp für einen häufigen Fehler, den Menschen machen.

Überprüfen Sie, ob das Kontrollkästchen mit direkten DOM-Operationen aktiviert ist, indem Sie die Methode .get() verwenden

Mit jQuery können wir mit der Methode .get() auf den DOM-Knoten unter jedem jQuery-Objekt zugreifen. Wir können diesen DOM-Knoten dann abfragen, um direkt auf verschiedene Eigenschaften zuzugreifen bzw. diese festzulegen.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

Sie können die funktionierende Demo dieses Codes unten sehen.

Lassen Sie uns diesen Code aufschlüsseln. (Bitte sehen Sie sich die beigefügten HTML- und CSS-Dateien an, um den Code besser zu verstehen.)

Wir wählen eine Schaltfläche aus, um das Check-Ereignis auszulösen, und hängen einen Callback auf das click-Ereignis daran an. Im Callback zeigen wir das Prüfergebnis an, indem wir es als Text zu einem p-Element hinzufügen; Wir verwenden die jQuery-Methode .html().

Beachten Sie, dass diese jQuery-Methode den früheren Text überschreibt, was hier unser gewünschter Anwendungsfall ist. Wir wollen für jeden neuen Check eine frische HTML-Ausgabe.

Die Hauptprüflogik befindet sich in der Zeile, die wir an die Methode .html() übergeben. Wir selektieren zunächst alle Eingabeelemente mit name = 'checkboxArray' in einem jQuery-Objekt.

Beachten Sie, dass der Selektor nur ein jQuery-Objekt zurückgibt und wir noch keinen Zugriff auf den zugrunde liegenden DOM-Knoten haben.

Aber dann verketten wir die .get-Methode wie folgt: .get(0). Wir haben jetzt Zugriff auf den ersten DOM-Knoten in der ausgewählten jQuery-Sammlung.

Wir werden prüfen, ob das erste Kontrollkästchen aktiviert ist, und so greifen wir auf den ersten DOM-Knoten zu, indem wir 0 als Argument an die .get()-Methode übergeben.

Wir können jetzt direkt auf die Eigenschaft .checked von jQuery zugreifen, um zu prüfen, ob das Kontrollkästchen aktiviert ist.

Profi-Tipp 1:

Die Eigenschaft .checked, auf die wir oben zugreifen, ist die JavaScript-Eigenschaft, die an den DOM-Knoten angehängt ist (oder technisch gesehen die IDL-Eigenschaft). Es unterscheidet sich vom HTML-Attribut checked, das nur den anfänglichen oder standardmäßig aktivierten/nicht aktivierten Wert des HTML-Elements anzeigt (technisch gesehen die HTML-Inhaltseigenschaft).

Wir werden uns diesen Unterschied später in diesem Blogbeitrag im Detail ansehen.

Profi-Tipp 2:

Direkte DOM-Vorgänge sind superschnell. Diese Methode lässt also jQuery verwenden, um zu prüfen, ob das Kontrollkästchen mit überlegener Leistung aktiviert ist.

Verknüpfungsprüfung, wenn das Kontrollkästchen mit direkten DOM-Vorgängen unter Verwendung des Dereferenzierungsoperators aktiviert ist

Jede jQuery verhält sich wie ein Array-Objekt. Wir können uns also an dieses Verhalten halten und etwas Code reduzieren, indem wir den kurzen Array-Dereferenzierungsoperator [] anstelle der .get-Methode verwenden.

$("button").on("click",function(){
    $("p").html(`<p>
    // ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

Der Code ist derselbe wie oben, mit Ausnahme der Verwendung des Dereferenzierungsoperators: ... $("input[name = 'checkboxArray']")[0]... .

Überprüfen Sie, ob das Kontrollkästchen mit der Methode .prop() aktiviert ist

Wir können auch die jQuery-Methode .prop() verwenden, um die zugrunde liegenden JavaScript-Eigenschaften aus Elementen zu extrahieren, anstatt direkt auf den DOM-Knoten zuzugreifen.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

Sie können die funktionierende Demo dieses Codes unten sehen.

Der größte Teil des Codes ähnelt dem obigen. Schauen wir uns die Zeile mit dem entscheidenden Unterschied an, das heißt:

 $("input[name='checkboxArray']").prop('checked')...

Wir extrahieren die gleiche Eigenschaft .checked wie oben, verwenden hier aber die jQuery-Methode .prop().

Profi-Tipp:

Warum die jQuery-Methode .prop() verwenden? Die jQuery-Methode .prop() ist auch eine schnelle Operation (im Vergleich zu der selektorbasierten Methode, die wir als nächstes sehen).

Es hat sich bewährt, Eigenschaften von DOM-Elementen mit JavaScript oder JS-basierten Bibliotheken wie jQuery abzufragen.

Überprüfen Sie, ob das Kontrollkästchen mit der Methode .is() aktiviert ist

Wir kombinieren den Selektor :checked mit der Methode .is(), um mit jQuery zu prüfen, ob das Kontrollkästchen aktiviert ist.

Der Selektor :checked gibt alle selektierten oder angehakten Elemente zurück. Bei Kontrollkästchen bedeutet dies, dass die Kontrollkästchen ausgewählt werden, die aktiviert sind.

$("some selector:checked");

// returns those elements that are checked

Mehr über den Selektor :checked können Sie [hier] lesen.

Die Methode .is() vergleicht ein jQuery-Objekt mit einem Selektor und gibt true zurück, wenn es mit diesem Selektor übereinstimmt.

$("some jQuery object").is("some_selector");

//returns true if the jQuery object matches the selector

Mehr über die .is()-Methode erfahren Sie [hier].

Lassen Sie uns die beiden in einem Code kombinieren, um zu überprüfen, ob das Kontrollkästchen mit jQuery aktiviert ist.

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

Sehen Sie sich unten die Demo dieser Methode an.

Der Code zum Einrichten des Ereignishandlers und des Rückrufs ähnelt den früheren Methoden. Die Hauptänderung besteht in der Implementierung der Prüfung, etwa so:

$("input[id = '#first']").is(":checked")...

Die Methode .is() gibt true zurück, wenn das Kontrollkästchen mit der ersten ID aktiviert ist, weil wir ihr den Selektor :checked als Argument übergeben.

Profi-Tipp:

Die Methode is() erstellt kein neues jQuery-Objekt oder ändert das ursprüngliche Objekt an Ort und Stelle. Dieses Verhalten macht es ideal für die Verwendung in Rückrufen und Ereignishandlern.

Häufige Anwendungsfälle für die Überprüfung, ob das Kontrollkästchen mit jQuery aktiviert ist

Nachdem wir nun die grundlegenden Methoden kennengelernt haben, wollen wir einige vorgefertigte Schnellskripte für allgemeine Anwendungsfälle erstellen.

Überprüfen Sie anhand der ID des Elements, ob das Kontrollkästchen aktiviert ist

Wir können die Überprüfung anhand der ID des Elements mit dem folgenden Code durchführen:

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
    <p/>`);
});

Wir wählen das Kontrollkästchen mit der ID second mit dem Attribut equals selector aus und übergeben die Option id='#second'.

Sie können die Arbeitsdemonstration unten sehen.

Überprüfen Sie, ob das Kontrollkästchen mithilfe der Klasse aktiviert ist

Wir können auch eine Gruppe von Kontrollkästchen mit einer gemeinsamen Klasse auswählen, um zu sehen, ob sie aktiviert sind. Der Code ist ziemlich einfach:

$("button").on("click",function(){
    $("p").html(' ');
    $("input[class='non-first']").each(function(){
        $("p").append(`
        ${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
        <br> `);
    });
});

Wir wählen alle Checkboxen mit der nicht-ersten Klasse aus und iterieren dann über jede von ihnen mit der .each()-Methode. Abschließend führen wir die Prüfung für jede Iteration durch und fügen die Ausgabe dem Element p hinzu.

Beachten Sie, dass wir für diesen Anwendungsfall die Methode append() verwenden, da wir die Ausgabe für die vorherige Iteration nicht überschreiben möchten.

Sie können die funktionierende Demo unten sehen:

Deaktivieren Sie das Kontrollkästchen, wenn es mit jQuery aktiviert ist

Wir verwenden das folgende Snippet, um ein Kontrollkästchen zu deaktivieren, wenn es mit jQuery aktiviert ist:

$("button").on("click",function(){
    // To find the checked boxes by ID
    let $checkedBox = $("input[id ='first']");
    // To run the check and toggle if the checkbox is checked
    if ($checkedBox.is(':checked')){
        $checkedBox.prop("checked", false);
    }
});

Wir verwenden hier die set-Form der .prop()-Methode.

$(some_jQuery_object).prop("checked",false);

// sets the "checked" property to false for the selected jQuery object

Sie können die funktionierende Demo dieses Snippets hier sehen:

Überprüfen Sie, ob alle Kontrollkästchen mit jQuery aktiviert sind

Wir können den folgenden Standardbaustein verwenden, um herauszufinden, ob alle Kontrollkästchen in einer bestimmten Sammlung aktiviert sind.

$("button").on("click",function(){
    let result = true;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if (!($(this).is(":checked"))){
        result = false;
    }
    });
    // to display the number of checked boxes
    $("p").html(`All checkboxes are ${result?'':'not'} checked`);
});

Sie können die funktionierende Demo des Snippets hier sehen:

Lassen Sie uns die Logik für diesen Code aufschlüsseln.

Wir hängen den Event-Handler wie oben an und iterieren über jedes aktivierte Kästchen in der Sammlung. Wir führen dann die Funktion .each() für jedes Kontrollkästchen aus und ändern die Variable result auf false, wenn irgendwelche Kontrollkästchen nicht aktiviert sind.

Abschließend geben wir das Ergebnis aus.

Überprüfen Sie mit jQuery, ob in der angegebenen Sammlung ein Kontrollkästchen aktiviert ist

Mit dem folgenden Code können wir überprüfen, ob mindestens eines der Kontrollkästchen aktiviert ist:

$("button").on("click",function(){
    let result = false;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if ($(this).is(":checked")){
        result = true;
    }
    });
    // to display if any (at least) one of the checkboxes is checked
    $("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});

Lassen Sie uns zuerst die Methode in Aktion mit der Arbeitsdemonstration unten sehen.

Die Logik ist einfach. Wir führen die Prüfung für jedes Kontrollkästchen in der Sammlung durch und ändern die Variable Ergebnis auf true, wenn auch nur eines der Kontrollkästchen aktiviert ist.

Andernfalls belassen wir den Wert der Variable result auf false und geben die Meldung entsprechend aus.

Deaktivieren Sie die Senden-Schaltfläche, wenn das Kontrollkästchen mit jQuery deaktiviert ist

Wir können ein einfaches Snippet schreiben, um eine Senden-Schaltfläche zu deaktivieren, wenn ein bestimmtes Kontrollkästchen nicht aktiviert ist.

$("button").on("click",function(){
    // To find the specific checkbox
    let $checkedBox = $("input[id='third']");
    let $submitBtn = $("input[name='submitBtn']");
    if ($($checkedBox).is(":checked")){
        $submitBtn.prop("disabled",false);
    }
    else {
        $submitBtn.prop("disabled",true);
    }
});

Sie können die Ausgabe dieser Lösung unten sehen:

Die Logik ist einfach. Wir bestimmen, ob das Kontrollkästchen aktiviert ist, mit der Methode .is() und dem Selektor :checked, genau wie bei unseren obigen Methoden.

Wenn das Kontrollkästchen aktiviert ist, setzen wir die Eigenschaft disabled des Elements submitBtn auf false; andernfalls setzen wir es auf wahr.

Veraltete Verwendung der .attr()-Methode zum Prüfen, ob das Kontrollkästchen mit jQuery aktiviert ist

HTML-Attribute unterscheiden sich von DOM-Eigenschaften. Oft stimmen Eigenschaften mit dem HTML-Attribut überein, aber nicht immer.

Wie im Fall von Checkboxen ist das HTML-Attribut checked nur der Indikator für den Standard- oder anfänglichen aktivierten/nicht aktivierten Zustand des Elements. Es entspricht nicht der DOM-Eigenschaft checked, die den aktuellen aktivierten/nicht aktivierten Zustand des Elements anzeigt.

Die jQuery-Methode .attr() verweist nur auf HTML-Attribute. Sie sollten diese Methode also nicht verwenden, um herauszufinden, ob das Kontrollkästchen aktiviert ist.

Sie konnten dies früher mit jQuery tun, aber das Verhalten änderte sich in Version 1.6, als die Methode .prop() hinzugefügt wurde, um explizit auf DOM-Eigenschaften zuzugreifen, und .attr() nur auf HTML-Attribute beschränkt wurde.

Wie jQuery mit Attributen und Properties anders umgeht, können Sie [hier] im Detail nachlesen.