Heim Web-Frontend js-Tutorial jQuery implementiert die einfache Bedienung von Kontrollkästchen

jQuery implementiert die einfache Bedienung von Kontrollkästchen

Jan 16, 2018 am 11:11 AM
jquery 操作

Dieser Artikel stellt hauptsächlich die einfache Bedienung von jQuery zum Implementieren von Kontrollkästchen vor und bietet bestimmte Referenzen und Lerninhalte zum Auswählen aller, Aufheben der Auswahl aller und Nicht-Auswählen aller Kontrollkästchen . Der Wert von jquery. Freunde, die sich für jquery interessieren, können sich auf diesen Artikel beziehen.

Wie man alle Kontrollkästchen auswählt, alle abwählt und nicht alle auswählt, um den Wert des ausgewählten Kontrollkästchens zu erhalten

1. Klicken Sie auf die Schaltfläche „Alle auswählen“ , um alle Kontrollkästchen zu aktivieren oder alle zu deaktivieren. 2. Realisieren Sie die Verknüpfung zwischen der Schaltfläche „Alle auswählen“ und der Kontrollkästchengruppe. Wenn eine der Kontrollkästchengruppen nicht ausgewählt ist, sollte die Schaltfläche „Alle auswählen“ mit der ID = „checkedAll“ deaktiviert sein Wenn alle ausgewählt sind, sollte auch die Schaltfläche „Alle auswählen“ ausgewählt sein.
3. Rufen Sie den Wert des ausgewählten Kontrollkästchens ab.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对复选框组的全选操作</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      /*全选
      全选cheched和下方的checkbox按钮的checked是一致的,
      故可用this.checked。
      注意:$(this).checked是错的
      */
      $(&#39;#checkedAll&#39;).click(function() {
        $(&#39;[name=item]:checkbox&#39;).prop(&#39;checked&#39;, this.checked);
      });

      /*判断复选框的总数,是否和选中的复选框的数量相等
      相等:全选了
      不相等:没有全选
      */
      $(&#39;[name=item]:checkbox&#39;).click(function() {
        /*得到的是ul下 name=item 的复选框数组*/
        var $checkedArray = $(&#39;[name=item]:checkbox&#39;);
        /*$checkedArray.filter(&#39;:checked&#39;) -----> 已经选择的复选框 */
        $(&#39;#checkedAll&#39;).prop(&#39;checked&#39;,$checkedArray.length==$checkedArray.filter(&#39;:checked&#39;).length);
            
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      //获取已选的复选框的值
      var checkedArray = new Array();//放已经选择的checkbox的value
      var count;//已经选择的个数
      $(&#39;#btn_submit&#39;).click(function() {
        checkedArray.length=0;
        count=0;
        $(&#39;[name=item]:checkbox:checked&#39;).each(function() {
          checkedArray.push($(this).val());
          count++;
        });
        if (checkedArray.length==0) {
          alert("Please check one at least.");
          return;
        }
        confirm("已选复选框的值:"+checkedArray+"\n"+"选中的复选框个数:"+count);
      });
    })
  </script>
</head>
<body>
  <form action="#" method="POST">
    <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label>
    <ul>
      <li><input type="checkbox" name="item" value="basketball">篮球</li>
      <li><input type="checkbox" name="item" value="football">足球</li>
      <li><input type="checkbox" name="item" value="badminton">羽毛球</li>
      <li><input type="checkbox" name="item" value="pingpong">兵乓球</li>
      <li><input type="checkbox" name="item" value="swimming">游泳</li>
      <li><input type="checkbox" name="item" value="running">跑步</li>
    </ul>
    <button type="button" id="btn_submit" value="提交button">提交</button>
  </form>
</body>
</html>
Nach dem Login kopieren
Bezüglich der Mängel im Code können diejenigen, die nicht prägnant genug sind, weiter optimiert werden. Wenn Sie bessere Ideen und Implementierungsmethoden haben, wenden Sie sich bitte an uns Es steht Ihnen frei, sie mit uns zu teilen.

Verwandte Empfehlungen:

Javascript ermittelt, ob der Benutzer die Seite bedient hat

Detaillierte Erläuterung von Beispielen für die Mehrfachvererbung mit JavaScript

JavaScript implementiert eine schnelle Sortieranalyse

Das obige ist der detaillierte Inhalt vonjQuery implementiert die einfache Bedienung von Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schritte und Vorsichtsmaßnahmen für die Linux-Bereitstellung Schritte und Vorsichtsmaßnahmen für die Linux-Bereitstellung Mar 14, 2024 pm 03:03 PM

Betriebsschritte und Vorsichtsmaßnahmen für LinuxDeploy LinuxDeploy ist ein leistungsstarkes Tool, mit dem Benutzer schnell verschiedene Linux-Distributionen auf Android-Geräten bereitstellen können, sodass Benutzer ein vollständiges Linux-System auf ihren Mobilgeräten erleben können. In diesem Artikel werden die Betriebsschritte und Vorsichtsmaßnahmen von LinuxDeploy ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, dieses Tool besser zu nutzen. Arbeitsschritte: LinuxDeploy installieren: Zuerst installieren

Huawei Mate60 Pro Screenshot-Bedienschritte teilen Huawei Mate60 Pro Screenshot-Bedienschritte teilen Mar 23, 2024 am 11:15 AM

Mit der Beliebtheit von Smartphones ist die Screenshot-Funktion zu einer der wesentlichen Fähigkeiten für die tägliche Nutzung von Mobiltelefonen geworden. Als eines der Flaggschiff-Handys von Huawei hat die Screenshot-Funktion des Huawei Mate60Pro natürlich große Aufmerksamkeit bei den Nutzern auf sich gezogen. Heute werden wir die Screenshot-Bedienungsschritte des Huawei Mate60Pro-Mobiltelefons teilen, damit jeder bequemer Screenshots machen kann. Erstens bietet das Huawei Mate60Pro-Mobiltelefon eine Vielzahl von Screenshot-Methoden, und Sie können die Methode auswählen, die Ihren persönlichen Gewohnheiten entspricht. Im Folgenden finden Sie eine detaillierte Einführung in mehrere häufig verwendete Abfangfunktionen:

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

So binden Sie WeChat an Ele.me So binden Sie WeChat an Ele.me Apr 01, 2024 pm 03:46 PM

Ele.me ist eine Software, die eine Vielzahl verschiedener Köstlichkeiten zusammenführt. Der Händler kann diese sofort nach Erhalt der Bestellung über die Software binden Betriebsmethode Denken Sie daran, die chinesische PHP-Website zu besuchen. Anweisungen zum Binden von WeChat an Ele.me: 1. Öffnen Sie zuerst die Ele.me-Software und klicken Sie nach dem Aufrufen der Startseite auf [Mein] in der unteren rechten Ecke. 2. Klicken Sie dann auf die Seite „Mein“. [Konto] in der oberen linken Ecke; 3. Gehen Sie dann zur Seite mit den persönlichen Informationen, auf der wir Mobiltelefone, WeChat, Alipay und Taobao verknüpfen können. 4. Nach dem letzten Klick wählen wir das WeChat-Konto aus Das muss auf der WeChat-Autorisierungsseite gebunden werden und auf „Einfach zulassen“ klicken.

PHP-String-Manipulation: eine praktische Möglichkeit, Leerzeichen effektiv zu entfernen PHP-String-Manipulation: eine praktische Möglichkeit, Leerzeichen effektiv zu entfernen Mar 24, 2024 am 11:45 AM

PHP-String-Operation: Eine praktische Methode zum effektiven Entfernen von Leerzeichen Bei der PHP-Entwicklung kommt es häufig vor, dass Sie Leerzeichen aus einem String entfernen müssen. Das Entfernen von Leerzeichen kann die Zeichenfolge sauberer machen und die nachfolgende Datenverarbeitung und -anzeige erleichtern. In diesem Artikel werden mehrere effektive und praktische Methoden zum Entfernen von Leerzeichen vorgestellt und spezifische Codebeispiele angehängt. Methode 1: Verwenden Sie die in PHP integrierte Funktion trim(). Die in PHP integrierte Funktion trim() kann Leerzeichen an beiden Enden der Zeichenfolge entfernen (einschließlich Leerzeichen, Tabulatoren, Zeilenumbrüche usw.), was sehr praktisch und einfach ist benutzen.

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

Astar-Absteckprinzip, Einkommensabbau, Airdrop-Projekte und -Strategien sowie Strategie auf Nanny-Ebene Astar-Absteckprinzip, Einkommensabbau, Airdrop-Projekte und -Strategien sowie Strategie auf Nanny-Ebene Jun 25, 2024 pm 07:09 PM

Inhaltsverzeichnis Astar Dapp Staking-Prinzip Staking-Einnahmen Abbau potenzieller Airdrop-Projekte: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking-Strategie und -Betrieb „AstarDapp Staking“ wurde zu Beginn dieses Jahres auf die V3-Version aktualisiert, und es wurden viele Anpassungen an den Staking-Einnahmen vorgenommen Regeln. Derzeit ist der erste Absteckzyklus beendet und der Unterzyklus „Abstimmung“ des zweiten Absteckzyklus hat gerade erst begonnen. Um die „zusätzlichen Prämien“-Vorteile zu erhalten, müssen Sie diese kritische Phase (voraussichtlich bis zum 26. Juni dauernd, mit weniger als 5 verbleibenden Tagen) bewältigen. Ich werde die Astar-Einnahmen im Detail aufschlüsseln,

See all articles