案例--input全选 与 复选框

需求:

  1. 点击全选按钮的复选框的时候

    => 如果全选按钮是选中状态, 那么每一个选项都是选中

    => 如果全选按钮是未选中状态, 那么每一个选项都是未选中

  2. 每一个选项按钮点击的时候

    => 都有可能影响全选按钮的选中状态

    => 当点击任何一个选项按钮的时候

      -> 如果所有选项按钮都是选中状态, 那么全选按钮选中

      -> 只要有任何一个选项按钮是未选中状态, 那么全选按钮未选中

分析:

  + 如何修改一个按钮的选中状态 ?

    => 使用原生属性 checked 设置为 true 或者 false

    => 来决定是否选中

代码实现:

  1. 获取元素

    => 全选按钮: 因为需要点击事件

    => 所有的选项按钮: 因为每一个都需要修改

      -> 一个一个获取, 还是成组获取

  2. 点击全选按钮的复选框的时候

    2-1. 给 全选 按钮绑定点击事件

    2-2. 拿到这个全选按钮的选中状态

    2-3. 给 btns 内的每一个 input 设置属性

      -> 当我自己是 true 的时候, 给他们都设置为 true

      -> 当我自己是 false 的时候, 给他们都设置为 false

  3. 每一个选项按钮点击的时候

    3-1. 给每一个选项按钮绑定点击事件

    3-2. 判断选中的选项按钮的数量

    3-3. 根据选中的数量决定全选按钮是否选中

      -> 当 count 和 btns.length 一样的时候, 全选按钮选中

      -> 当 count 和 btns.length 不一样的时候, 全选按钮未选中

---

<div>
    <!--
      属性名和属性值一样的原生属性叫做 布尔类 属性
      在 js 内设置的时候, 可以直接以 true 和 false 进行设置
    -->
    <input type="checkbox"> 全选
    <hr>
    <input type="checkbox"> 选项一 <br>
    <input type="checkbox"> 选项二 <br>
    <input type="checkbox"> 选项三 <br>
    <input type="checkbox"> 选项四 <br>
</div>
/* ---------------------------------------------------------- */
  let allInp = document.querySelector('input')
  let listInp = document.querySelectorAll('input:nth-child(n+2)')
  let count = 0
  allInp.onclick = () => {
    let c = allInp.checked
    listInp.forEach(item => {
      item.checked = c
    })
  }
  listInp.forEach(item => {
    item.onclick = () => {
      item.checked == true ? count++ : count--
      allInp.checked = count == listInp.length
    }
  })