Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie jquery, um die Funktionen „Alle auswählen' und „Alle abwählen' zu implementieren

So verwenden Sie jquery, um die Funktionen „Alle auswählen' und „Alle abwählen' zu implementieren

coldplay.xixi
coldplay.xixiOriginal
2020-12-07 11:02:149709Durchsuche

So verwenden Sie jquery, um die Funktionen „Alle auswählen“ und „Auswahl aufheben“ zu implementieren: Führen Sie zuerst die JQuery-Bibliothek ein und legen Sie die Ladefunktion von JQuery fest. Rufen Sie dann die Elemente des All-Select-Felds basierend auf der ID ab und binden Sie das Klickereignis an die All-Select-Box; schließlich erhalten Sie eine Mehrfachauswahlbox, deren Klassenattributwert checkOne ist.

So verwenden Sie jquery, um die Funktionen „Alle auswählen' und „Alle abwählen' zu implementieren

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: jquery-Video-Tutorial

So verwenden Sie jquery, um die Funktionen „Alle auswählen“ und „Alle abwählen“ zu implementieren:

1. Erstellen Sie einen HTML-Code und fügen Sie dann den Code wie unten gezeigt im Body-Tag hinzu, hauptsächlich in a Die Tabelle enthält Kontrollkästchen.

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

2. Als Erstes stellen wir die JQuery-Bibliothek vor. Achten Sie auf die Art und Weise der JQuery-Bibliothek: <script src="js/jquery-1.8.3.js"></script> kann nicht geschrieben werden als <script src="js/jquery-1.8.3.js"></script>不能写成

<script src="js/jquery-1.8.3.js"></script>

Hier entlang. Ansonsten ist es ungültig! Sie können den Unterschied zwischen den beiden ausprobieren.

html5 muss nicht type="text/javascript"

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

3 hinzufügen. Die Ladefunktion ist die Standardkonfiguration von jquery. Die folgende Methode ist relativ abgekürzt.

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

4. Rufen Sie als Nächstes die Elemente des All-Select-Felds basierend auf der ID ab und binden Sie dann das Klickereignis an das All-Select-Feld.

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

5. Vervollständigen Sie die Click-Ereignismethode: Rufen Sie das Mehrfachauswahlfeld ab, dessen Klassenattributwert checkOne ist, und setzen Sie dann das aktivierte Attribut über die Prop-Methode (Eigenschaft, Wert) auf das Kontrollkästchen „Alle auswählen/deaktivieren“. wie überprüft.

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

6. Mit den obigen Schritten wurde die Verwendung von jquery zum Implementieren der Funktionen zum Auswählen aller und Aufheben der Auswahl aller abgeschlossen. Wir führen diesen HTML-Code über den Browser aus, um den folgenden Effekt zu sehen.

So verwenden Sie jquery, um die Funktionen „Alle auswählen und „Alle abwählen zu implementieren

Verwandte Lernempfehlungen: js-Video-Tutorial

🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jquery, um die Funktionen „Alle auswählen' und „Alle abwählen' zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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