JS实现复选框全选和反选

效果图

Checked用法：

在加载的javascript中设置：

1.变量名+.checked=true的意思就是该元素的checked的值是true，就是该input被选中。
2.变量名+.checked=false的意思就是该元素的checked的值是false，就是该input不被选中。
你那个既然把所有的元素都遍历了一遍，然后又都给了true值，也就是全选了。

JS全选方法

 // 1.获取元素
    // 1.1 获取全选复选框
    let checkAll = document.querySelector('#checkAll')
    // 1.2 获取文本容器
    let all = document.querySelector('.all')
    // 1.3 获取其它的复选框
    let cks = document.querySelectorAll('.ck')

    // 2.实现全选和全不选
    // 用全选复选框的状态，赋值给下面的所有复选框
    checkAll.addEventListener('click', function () {
      // 2.1 先获取当前全选复选框经过这一次单击之后的状态
      let state = checkAll.checked
      // 2.2 将状态赋值给下面的所有复选框，伪数组需要遍历
      cks.forEach(function (ele, index) {
        ele.checked = state
      })
      all.innerText = state ? '取消' : '全选'
    })

JS反选方法

// 1.获取元素
    // 1.1 获取全选复选框
    let checkAll = document.querySelector('#checkAll')
    // 1.2 获取文本容器
    let all = document.querySelector('.all')
    // 1.3 获取其它的复选框
    let cks = document.querySelectorAll('.ck')
    
    // 设置一个全局的标记
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        // 实现方式就是获取当前被选中的 复选框的数量，与总数进行比较
        // .ck:checked: 找到匹配的元素，只会匹配被选中的复选框
        let count = document.querySelectorAll('.ck:checked').length
        if (count === cks.length) {
          checkAll.checked = true
          all.innerText = '取消'
        } else {
          checkAll.checked = false
          all.innerText = '全选'
        }
      })
    }

小结一下

以上就是全选和反选功能的代码实现，大家也可以自己尝试一下，全选功能是在很多注册页面、获取用户兴趣爱好、让用户勾选一些选项等页面中常见的一种效果，主要有全选/全不选，反选，重置，提交等几个功能。同时若文章有表述问题或着有该功能更好的实现方式，欢迎讨论。