js 全选操作的基本实现

层叠样式表广东分表
1,293 阅读2分钟

在开发过程中一些复选框往往就有全选的功能, 里面包含了以下情况

  1. 点击全选框, 其他相关的复选框都会选中
  2. 点击取消全选, 其她的复选框有选中变为不选中
  3. 只要有一个子复选框有一个没选中, 全选复选框就没有选中
  4. 所以的子复选框都选中了, 全选复选框选中

下面就看看这些功能是如何实现的吧

第一步 模拟情景

    <input type="checkbox" class="all">全选<br>
    <input type="checkbox" class="ck"> 老大
    <input type="checkbox" class="ck"> 老二<br>
    <input type="checkbox" class="ck"> 老三
    <input type="checkbox" class="ck"> 老四

image.png

第二步 获取页面元素

    <script>
        // 获取全选复选框
        let all = document.querySelector('.all')
        // 获取子复选框
        let cks = document.querySelectorAll('.ck')
        // 获取全选复选框文字
        let text = document.querySelector('.text')
    </script>

第三步 全选复选框相关操作

        all.addEventListener('click', function () {
            cks.forEach(function (ele, i) {
                ele.checked = all.checked
            })
        })

  • 第一步: 给全选复选框添加监听事件<单击>

  • 第二步: 遍历子复选框, 让其选中状态与全选复选框的选中状态一样

  • 注意: 遍历可以使用for或forEach遍历, 但不能用map和filter遍历, 因为使用document.querySelectorAll得到的返回值是一个伪数组

动画 (1).gif

第四步 子复选框的相关操作

        cks.forEach(function (ele, i) {
            ele.addEventListener('click', function () {
                let num = document.querySelectorAll('.ck:checked').length
                all.checked = num == cks.length ? true : false
            })
        })
  • 第一步: 子复选框伪数组cks遍历(这里使用的是forEach)
  • 第二步: 在遍历内部给每个复选框添加监听事件<单击>
  • 第三步: 在单击事件内统计复选框选中的个数num, document.querySelectorAll('.ck:checked')获取所有类名为ck并且选中状态checked为true的选择器
  • 第四步: 判断num和伪数组长度也就是复选框个数是否相等, 相等就将全选复选框的checked值变为true, 不相等就为false

动画 (2).gif

第五步 全选复选框的文字操作

  • 在全选复选框事件监听里添加

    text.innerText = all.checked == true ? '取消全选' : '全选'

  • 在子复选框监听事件里的添加

    text.innerText = num == cks.length ? '取消全选' : '全选'

  • 在两处不同的地方添加是因为点击的地方不一样, 每一次点击都需要判断一遍全选复选框的状态, 再来给文字进行修改

主要代码

<body>
    <input type="checkbox" class="all">
    <span class="text">全选</span>
    <br>
    <input type="checkbox" class="ck"> 老大
    <input type="checkbox" class="ck"> 老二<br>
    <input type="checkbox" class="ck"> 老三
    <input type="checkbox" class="ck"> 老四

    <script>
        // 获取全选复选框
        let all = document.querySelector('.all')
        // 获取子复选框
        let cks = document.querySelectorAll('.ck')
        // 获取全选复选框文字
        let text = document.querySelector('.text')

        // 给全选复选框添加监听事件
        all.addEventListener('click', function () {
            // 选中状态与全选复选框的选中状态保持一致
            cks.forEach(function (ele, i) {
                ele.checked = all.checked
            })
            text.innerText = all.checked == true ? '取消全选' : '全选'
        })

        // 给全选复选框添加监听事件
        cks.forEach(function (ele, i) {
            ele.addEventListener('click', function () {
                let num = document.querySelectorAll('.ck:checked').length
                all.checked = num == cks.length ? true : false
                text.innerText = num == cks.length ? '取消全选' : '全选'
            })
        })
    </script>
</body>
  • 主要知识点有
  • 页面元素的获取document.querySelector(' ')和document.querySelectorAll(' ')
  • 绑定监听事件.addEventListener('click', function (){ })
  • 遍历forEach(function (ele, i){ })
  • 页面元素的赋值 .innerText = ' '
avatar
文章
阅读
粉丝