欢迎光临
我的个人博客网站

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


代码直接放在HTML页面即可运行,不理解的地方可以查看注释或评论区交流

<!DOCTYPE html> <html>       <head>             <meta charset="utf-8">             <title>JS实现复选框全选和全不选</title>             <script type="text/javascript">                   window.onload = function() {                         // 通过ID获取到全选按钮                         var checkAll = document.getElementById("checkAll");                         // 获取到name属性为"hobby"的所有按钮                         var hobby = document.getElementsByName("hobby");                         // 点击按钮进行全选和全不选                         checkAll.onclick = function() {                               for (var i = 0; i < hobby.length; i++) {                                     /* 根据全选按钮属性为true/false时                                        同时将属性值赋值给每一个"hobby"按钮 */                                     hobby[i].checked = checkAll.checked;                                     }                               }                         /*当所有其他选项都被选中时,全选按钮才是选中状态*/                         // 获取name属性为"hobby"按钮的数量                         var length = hobby.length;                         // 页面加载完成后此循环用来获取每一个"hobby"按钮                         for (var i = 0; i < length; i++) {                         // 当"hobby"按钮触发点击时间时执行以下函数                               hobby[i].onclick = function() {                                     // 定义一个计数变量                                     var count = 0;                                     // 点击事件触发后执行此循环                                     for (var i = 0; i < length; i++) {                                           // 如果有一个"hobby"复选框被选中,count计数加一                                           if (hobby[i].checked == true) {                                                 count++;                                           }                                     }                                     /* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时,                                     将返回的值true赋值给全选按钮,反之亦然 */                                     checkAll.checked = (count == length);                               }                         }                   }             </script>       </head>       <body>             <input type="checkbox" name="hobby" id="smoke" />抽烟<br />             <input type="checkbox" name="hobby" id="drink" />喝酒<br />             <input type="checkbox" name="hobby" id="perm" />烫头             <hr />             <input type="checkbox" name="checkAll" id="checkAll" />全选<br />       </body> </html> 
运行结果:

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » Checkbox复选框实现全选和全不选功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏