全选与子项联动实现-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49933232/article/details/108111659
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 160px;
      padding: 5px;
      border: 1px solid #333;
      margin: 100px auto;
    }

    .box > div {
      padding: 15px;
    }
  </style>
</head>
<body>

  <div class="box">
    <div class="all">
      全选: <input type="checkbox">
    </div>
    <hr>
    <div class="items">
      选项一: <input type="checkbox"> <br>
      选项二: <input type="checkbox"> <br>
      选项三: <input type="checkbox"> <br>
      选项四: <input type="checkbox"> <br>
    </div>
  </div>

  <script>
    /*
      全选

      分析业务逻辑
        1. 点击全选按钮的时候
          => 如果全选按钮是选中, 那么每一个选项按钮也选中
          => 如果全选按钮是未选中, 那么每一个选项按钮都是未选中
        2. 每一个选项按钮点击的时候
          => 如果所有的选项按钮都是选中, 那么全选按钮选中
          => 只要有任意一个选项按钮未选中, 那么全选按钮未选中

      代码:
        1. 获取元素
          => 全选按钮
          => 所有的选项按钮
        2. 给全选按钮添加一个点击事件
          => 获取全选按钮的选中状态
          => 使用 checked 原生属性
          => 循环遍历 itemBtns, 给里面的每一个 input 设置 checked 属性
          => 我自己是什么就给他们设置成什么
        3. 给 itemBtns 里面的每一个添加一个点击事件
          => 每一个按钮的点击, 都需要判断是不是所有的按钮都是选中
          => 遍历 itemBtns 判断里面每一个是不是都是选中状态
            -> 做一个假设变量, 假设所有的都是选中
            -> 循环遍历
            -> 只要有任何一个是未选中的, 那么把我的假设否定掉
            -> 结束循环
          => 根据我判断的 flag 的值给 全选按钮设置选中状态
    */


    // 1. 获取元素
    var allBtn = document.querySelector('.all > input')
    // querySelectorAll 方法获取的元素集合可以使用 forEach
    var itemBtns = document.querySelectorAll('.items > input')

    var allbtn = document.querySelector('.all > input')
    var itembtns = document.querySelectorAll('.items > input')
    // 2. 给全选按钮添加点击事件
    allBtn.onclick = function () {
      // 2-2. 获取自己的状态
      var type = allBtn.checked
      // 2-3. 循环遍历 itemBtns 给他们设置
      // for (var i = 0; i < itemBtns.length; i++) {
      //   itemBtns[i].checked = type
      // }
      itemBtns.forEach(function (item) { item.checked = type })
    }
    // 3. 给 每一个选项 按钮添加点击事件
    itemBtns.forEach(function (item) {
      // 添加点击事件
      item.onclick = function () {
        // 3-2. 判断是不是每一个都是选中的
        var flag = true
        itemBtns.forEach(function (item) {
          if (!item.checked) flag = false
        })

        // 3-3. 给全选按钮设置选中状态
        // flag === true, 表示全都选中, 全选按钮选中
        // flag === false, 表示没有全都选中, 全选按钮未选中
        allBtn.checked = flag
      }
    })
  </script>
</body>
</html>
渲染简单全选
