suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert die einfache Bedienung von Kontrollkästchen

jQuery implementiert die einfache Bedienung von Kontrollkästchen

韦小宝
韦小宝Original
2018-01-16 11:11:381012Durchsuche

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>
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!

JavaScript jquery 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：Erzielen Sie Fünf-Sterne-Lob basierend auf JQueryNächster Artikel：Erzielen Sie Fünf-Sterne-Lob basierend auf JQuery

In Verbindung stehende Artikel

Mehr sehen