js实现全选

最新推荐文章于 2022-07-12 12:33:00 发布

hrthopefully

最新推荐文章于 2022-07-12 12:33:00 发布

阅读量536

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/he_ruiting/article/details/80100489

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写了一个使用简单的js实现全选的小案例,如果使用模块化编程,需做对应的修改

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选</title>
<style>
  .container{
    background-color: #ffe8000d;
    width: 600px;
    height: 200px;
    margin: 100px auto;
    border: 1px solid #f44336;
    padding: 50px;
  }
</style>
</head>
<body>
  <div class="container">
    <div style="margin-bottom: 20px;">
      <span>类型: </span>
      <span>
        <input type="checkbox" id="checkAll">
        <span>全选</span>
      </span>
    </div>
    <div>
       <label>
        <input type="checkbox" class="order_box">
        <span>aa</span>
      </label>
      <label>
        <input type="checkbox" class="order_box">
        <span>ss</span>
      </label>
      <label>
        <input type="checkbox" class="order_box">
        <span>dd</span>
      </label>
      <label>
        <input type="checkbox" class="order_box">
        <span>ff</span>
      </label>
      <label>
        <input type="checkbox" class="order_box">
        <span>gg</span>
      </label>
    </div>
  </div>
 
  <script>
    // 获取全选按钮
    let checkAll = document.querySelector("#checkAll");
    // 获取其他按钮
    let checks = document.querySelectorAll(".order_box");
    // 全选按钮点击事件
    checkAll.onclick = function(){
      // 循环选中所有
      checks.forEach(check => {
        check.checked = this.checked;
      })
    };

    // 为其他按钮设置点击事件
    checks.forEach(check => {
      check.onclick = function(){
        // 如果这个按钮被设为不选中,则全选按钮不选中
        if(!this.checked){
          checkAll.checked = false;
        } else {
          // 如果没有获取到没有被选中的按钮,则全选按钮选中
          var unchecked = document.querySelector(".order_box:not(:checked)");
          if(unchecked === null)
            checkAll.checked = true;
        }
      }
    });
  </script>
</body>
</html>