JQuery/PHP

Checkbox 复选框实现全选和全不选功能

PetitQPetitQ JQuery/PHP 2022-3-17 618 0
收藏
阿里云

代码直接放在 HTML/CSS/Javascript 在线代码运行中页面即可显示，不理解的地方可以查看注释：

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.       <head>
  6.  
  7.             <meta charset="utf-8">
  8.  
  9.             <title>JS实现复选框全选和全不选</title>
  10.  
  11.             <script type="text/javascript">
  12.  
  13.                   window.onload = function() {
  14.  
  15.                         // 通过ID获取到全选按钮
  16.  
  17.                         var checkAll = document.getElementById("checkAll");
  18.  
  19.                         // 获取到name属性为"hobby"的所有按钮
  20.  
  21.                         var hobby = document.getElementsByName("hobby");
  22.  
  23.                         // 点击按钮进行全选和全不选
  24.  
  25.                         checkAll.onclick = function() {
  26.  
  27.                               for (var i = 0; i < hobby.length; i++) {
  28.  
  29.                                     /* 根据全选按钮属性为true/false时
  30.  
  31.                                        同时将属性值赋值给每一个"hobby"按钮 */
  32.  
  33.                                     hobby[i].checked = checkAll.checked;
  34.  
  35.                                     }
  36.  
  37.                               }
  38.  
  39.                         /*当所有其他选项都被选中时，全选按钮才是选中状态*/
  40.  
  41.                         // 获取name属性为"hobby"按钮的数量
  42.  
  43.                         var length = hobby.length;
  44.  
  45.                         // 页面加载完成后此循环用来获取每一个"hobby"按钮
  46.  
  47.                         for (var i = 0; i < length; i++) {
  48.  
  49.                         // 当"hobby"按钮触发点击时间时执行以下函数
  50.  
  51.                               hobby[i].onclick = function() {
  52.  
  53.                                     // 定义一个计数变量
  54.  
  55.                                     var count = 0;
  56.  
  57.                                     // 点击事件触发后执行此循环
  58.  
  59.                                     for (var i = 0; i < length; i++) {
  60.  
  61.                                           // 如果有一个"hobby"复选框被选中，count计数加一
  62.  
  63.                                           if (hobby[i].checked == true) {
  64.  
  65.                                                 count++;
  66.  
  67.                                           }
  68.  
  69.                                     }
  70.  
  71.                                     /* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时，
  72.  
  73.                                     将返回的值true赋值给全选按钮，反之亦然 */
  74.  
  75.                                     checkAll.checked = (count == length);
  76.  
  77.                               }
  78.  
  79.                         }
  80.  
  81.                   }
  82.  
  83.             </script>
  84.  
  85.       </head>
  86.  
  87.       <body>
  88.  
  89.             <input type="checkbox" name="hobby" id="smoke" />抽烟<br />
  90.  
  91.             <input type="checkbox" name="hobby" id="drink" />喝酒<br />
  92.  
  93.             <input type="checkbox" name="hobby" id="perm" />烫头
  94.  
  95.             <hr />
  96.  
  97.             <input type="checkbox" name="checkAll" id="checkAll" />全选<br />
  98.  
  99.       </body>
  100.  
  101. </html>
也想出现在这里？联系我们吧
创客主机

Checkbox 复选框实现全选和全不选功能

已有 155 人购买
查看演示升级 VIP立刻购买

咨询客服 咨询客服

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录