Mehrere Kontrollkästchen auswählen Auswahl mit jQuery aufheben

Last updated 18. Oktober 2021

Inhalt

jQuery-Code, der mehrere Kontrollkästchen aktiviert/deaktiviert

Bei der Entwicklung von Webanwendungen müssen wir normalerweise CRUD-Operationen ausführen. Für die Listenansicht hatten wir früher eine Tabelle mit mehreren Zeilen. In jeder Zeile behalten wir ein Kontrollkästchen, um eine bestimmte Zeile zu aktivieren/deaktivieren. Diese Kontrollkästchen werden verwendet, wenn der Benutzer eine Zeile aus der Datenbank löschen möchte. Es kann auch eine Massenlöschfunktion haben, bei der das übergeordnete Kontrollkästchen zum Aktivieren/Deaktivieren der untergeordneten Kontrollkästchen verwendet wird.

In diesem Artikel untersuchen wir, wie Sie mit jQuery mehrere Kontrollkästchen aktivieren/deaktivieren.

Unsere endgültige Ansicht ist wie im Screenshot unten gezeigt. Es zeigt das übergeordnete Kontrollkästchen in der Überschriftszeile und jede Zeile hat ein eigenes Kontrollkästchen.

Wenn Sie das übergeordnete Kontrollkästchen aktivieren, werden alle untergeordneten Kontrollkästchen aktiviert. Und wenn wir das übergeordnete Kontrollkästchen deaktivieren, sollten untergeordnete Kontrollkästchen deaktiviert werden. Lassen Sie uns jedoch sehen, wie Sie mithilfe von jQuery mehrere Kontrollkästchen aktivieren/deaktivieren.

Beispieltabelle in Bootstrap erstellen

Um zu beginnen, benötigen wir eine Tabelle mit einigen Datensätzen sowie Kontrollkästchen. Im folgenden Code erstelle ich eine Dummy-Tabelle mit Bootstrap. Ich habe auch Dummy-Einträge in der Tabelle hinzugefügt.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectall"/></th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="1"/></td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="2"/></td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="3"/></td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-6 col-md-4"></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Wenn Sie die obige HTML-Datei im Browser ausführen, sehen Sie eine Tabelle mit 4 Zeilen. Die erste Zeile ist für Überschriftenzwecke und die erste Spalte für die Kontrollkästchen. Jetzt werden wir jQuery-Code schreiben, der Kontrollkästchen tatsächlich zaubert.

jQuery-Code, der mehrere Kontrollkästchen aktiviert/deaktiviert

jQuery stellt Methoden und Events bereit, mit denen wir unser Ziel erreichen können. Hier werde ich clickEreignis und propMethode verwenden, um unsere Aufgabe zu erfüllen.

<script type="text/javascript">
jQuery(function($) {
    $('body').on('click', '#selectall', function() {
        $('.singlechkbox').prop('checked', this.checked);
    });
 
    $('body').on('click', '.singlechkbox', function() {
        if($('.singlechkbox').length == $('.singlechkbox:checked').length) {
            $('#selectall').prop('checked', true);
        } else {
            $("#selectall").prop('checked', false);
        }
 
    });
});
</script>

Der obige Code prüft, ob das übergeordnete Kontrollkästchen aktiviert ist. Wenn dies der Fall ist, werden alle Kontrollkästchen aktiviert. Wenn Sie das übergeordnete Kontrollkästchen deaktivieren, werden auch alle untergeordneten Kontrollkästchen deaktiviert.

Ich hoffe, Sie verstehen, wie Sie Kontrollkästchen mit jQuery aktivieren/deaktivieren. Ich würde gerne Ihre Meinung im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net