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

2021-02-18 19:05:25 阅读：240 来源： 互联网

标签：checkbox checked items JS flag 全选按钮 check

思路：

获取全选按钮及其他按钮组
全选和取消全选按钮组的选中状态同全选按钮
设置一个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>

标签：checkbox,checked,items,JS,flag,全选,按钮,check
来源： https://blog.csdn.net/qq_40937541/article/details/113851514

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

全部代码