案例--input全选与复选框

复选框全选与反选实现逻辑

最新推荐文章于 2024-12-27 17:39:09 发布

原创最新推荐文章于 2024-12-27 17:39:09 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客详细解析了如何通过JavaScript实现复选框全选和反选的功能。内容包括：当点击全选按钮时，同步所有选项的选中状态；反之，点击选项时，根据选中状态更新全选按钮。通过原生属性checked和事件监听，实现了双向联动的效果。

需求:

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
    }
  })