suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für die einfache Funktionsweise von jQuery zum Implementieren eines Kontrollkästchens

Detailliertes Beispiel für die einfache Funktionsweise von jQuery zum Implementieren eines Kontrollkästchens

小云云
小云云Original
2017-12-19 16:59:441139Durchsuche

In Bezug auf die Frage „Alle auswählen“, „Nicht alle auswählen“ und „Nicht alle Kontrollkästchen auswählen“ wird in diesem Artikel hauptsächlich die einfache Funktionsweise von jQuery zum Implementieren von Kontrollkästchen vorgestellt, auf die sich interessierte Freunde beziehen können Ich hoffe, es kann allen helfen.

Alle auswählen, alle abwählen oder nicht alle Kontrollkästchen auswählen und den Wert des ausgewählten Kontrollkästchens abrufen

1 Klicken Sie auf die Schaltfläche „Alle auswählen“, um alle Kontrollkästchen auszuwählen Gruppen Alle auswählen oder 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>

Wenn der Code nicht präzise genug ist, kann er erneut optimiert werden Es gibt nichts Besseres. Ideen und Umsetzungsmethoden sind herzlich willkommen, sich auszutauschen und gemeinsam zu lernen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der benutzerdefinierten CSS- und HTML-Checkbox-Effekte

Detaillierte Erläuterung der jQuery-Methode zur Bedienung von CheckBox

Detaillierte Erläuterung verschiedener einfacher Anwendungsbeispiele für das JQuery-Bedien-Kontrollkästchen

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die einfache Funktionsweise von jQuery zum Implementieren eines Kontrollkästchens. 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
Vorheriger Artikel：Beispielanalyse von NodeJS zur Implementierung der VideotranskodierungNächster Artikel：Beispielanalyse von NodeJS zur Implementierung der Videotranskodierung

In Verbindung stehende Artikel

Mehr sehen