Deaktivieren Sie alle JQuery-Kontrollkästchen-Front-End-Fragen und Antworten-php.cn

Deaktivieren Sie alle JQuery-Kontrollkästchen

WBOY

Freigeben： 2023-05-25 10:16:37

Original

593 Leute haben es durchsucht

Deaktivieren Sie alle jQuery-Kontrollkästchen.

Bei der Entwicklung von Webseiten werden Kontrollkästchen häufig verwendet. Die Funktion von Kontrollkästchen besteht darin, Benutzern die Auswahl einer oder mehrerer Optionen zu ermöglichen. Normalerweise stellen wir eine Schaltfläche „Alle auswählen“ zur Verfügung, damit Benutzer alle Optionen auf einmal auswählen können. Manchmal müssen wir jedoch auch eine Schaltfläche „Alle auswählen“ bereitstellen, damit Benutzer alle Optionen auf einmal abbrechen können.

In diesem Artikel stellen wir vor, wie Sie mit jQuery die Funktion zum Aufheben der Auswahl aller Kontrollkästchen implementieren.

HTML-Code

Schauen wir uns zunächst den HTML-Code an, der drei Kontrollkästchen und zwei Schaltflächen enthält: „Alles auswählen“ und „Alles abwählen“.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery复选框全不选</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h2>请选择你喜欢的水果：</h2>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="orange">橙子<br>
    <br>
    <button id="btnCheckAll">全选</button>
    <button id="btnCheckNone">全不选</button>
</body>
</html>

Nach dem Login kopieren

jQuery-Code

Als nächstes verwenden wir jQuery, um die Funktion zum Aufheben der Auswahl abzuschließen. Zuerst müssen wir alle Kontrollkästchen abrufen, dann diese Kontrollkästchen durchlaufen und deren „aktiviert“-Attribut der Reihe nach auf „false“ setzen.

$(function(){
    $("#btnCheckNone").click(function(){
        $("input[type='checkbox']").each(function(){
            $(this).prop("checked", false);
        });
    });
});

Nach dem Login kopieren

Im obigen Code verwenden wir zuerst den jQuery-Selektor, um alle Kontrollkästchen abzurufen, und verwenden dann die Methode „each“, um diese Kontrollkästchen zu durchlaufen. Während des Durchlaufprozesses verwenden wir die Methode „prop“, um das Attribut „checked“ auf false zu setzen, sodass die Funktion, nicht alle auszuwählen, erreicht werden kann.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktion zum Aufheben der Auswahl von Kontrollkästchen realisieren. Indem wir das Attribut „checked“ aller Kontrollkästchen auf „false“ setzen, können wir alle Optionen auf einmal deaktivieren und so für eine komfortablere Benutzererfahrung sorgen. Der Code ist einfach und leicht zu verstehen und kann problemlos auf die tatsächliche Entwicklung angewendet werden.

Das obige ist der detaillierte Inhalt vonDeaktivieren Sie alle JQuery-Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!