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

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了Checkbox复选框实现全选和全不选功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<!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复选框实现全选和全不选功能

总结


以上是前端之家为你收集整理的Checkbox复选框实现全选和全不选功能全部内容,希望文章能够帮你解决Checkbox复选框实现全选和全不选功能所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。