纯JS实现checkbox全选和取消全选

最新推荐文章于 2023-01-18 18:21:44 发布

Feolu

最新推荐文章于 2023-01-18 18:21:44 发布

阅读量825

点赞数 2

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40937541/article/details/113851514

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

思路：

获取全选按钮及其他按钮组
全选和取消全选按钮组的选中状态同全选按钮
设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，按钮组中有一个为未被选中状态，flag = false .反之 flag = true

全部代码

 <body>
    <div>
      <label for="">全选</label>
      <input type="checkbox" name="" id="check_all" />
    </div>
    <div id="check_items">
      <input type="checkbox" />
      <input type="checkbox" />
      <input type="checkbox" />
      <input type="checkbox" />
      <input type="checkbox" />
    </div>

    <script>
      // 1.获取全选按钮及其他按钮组
      var check_all = document.getElementById("check_all");
      var check_items = document
        .getElementById("check_items")
        .getElementsByTagName("input");
      // 2.全选和取消全选  按钮组的选中状态同全选按钮
      check_all.onclick = function () {
        for (var i = 0; i < check_items.length; i++) {
          check_items[i].checked = this.checked;
        }
      };
      // 3.设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，
      // 按钮组中有一个为未被选中状态，flag = false .反之 flag = true
      for (let i = 0; i < check_items.length; i++) {
        check_items[i].onclick = function () {
          var flag = true;
          for (let index = 0; index < check_items.length; index++) {
            if (!check_items[index].checked) {
              flag = false;
              break
            }
            break;
          }
          check_all.checked = flag;
        };
      }
    </script>
  </body>

Feolu

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯JS实现checkbox全选和取消全选

思路：获取全选按钮及其他按钮组全选和取消全选按钮组的选中状态同全选按钮设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，按钮组中有一个为未被选中状态，flag = false .反之 flag = true全部代码 <body> <div> <label for="">全选</label> <input type="checkbox" name="" id="ch
复制链接

扫一扫

专栏目录