全选框案例

功能要求

在这里插入图片描述

代码实现

<body>
  <input type="checkbox" id="all"> 
  <input type="checkbox" class="other">
  <input type="checkbox" class="other">
  <input type="checkbox" class="other">
  <input type="checkbox" class="other">

  <script>
    var allCb = document.getElementById('all');
    var otherCbs = document.getElementsByClassName('other');

    // 实现点击全选按钮,选项都被选中
    allCb.onclick = function () {
      for (var i = 0; i < otherCbs.length; i++) {
        otherCbs[i].checked = this.checked;
      }
    }

    // 实现选项勾满时,全选按钮也被勾上
    for (var i = 0; i < otherCbs.length; i++) {
      otherCbs[i].onclick = function () {
        // 全选按钮的状态
        var flag = true;
        // 遍历所有选项按钮,检测是否存在未勾选的按钮
        for (var i = 0; i < otherCbs.length; i++) {
          // 发现未勾选按钮,遍历结束
          if (otherCbs[i].checked == false) {
            flag = false;
            break;
          }
        }
        allCb.checked = flag;
      }
    }
  </script>
</body>
发布了115 篇原创文章 · 获赞 0 · 访问量 2557

猜你喜欢

转载自blog.csdn.net/qq_35764106/article/details/105126458