Heim > Artikel > Web-Frontend > Deaktivieren Sie alle JQuery-Kontrollkästchen

Deaktivieren Sie alle JQuery-Kontrollkästchen

WBOYOriginal: 2023-05-25 10:16:37504Durchsuche

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>

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);
        });
    });
});

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!

jquery html checkbox 选择器

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Jquery-Dropdown-Feld löschenNächster Artikel：Jquery-Dropdown-Feld löschen

In Verbindung stehende Artikel

Mehr sehen