利用JavaScript实现全选复选功能

功能实现:

1.点击全选按钮全部选中,再次点击则取消全部选中

2.当点满复选框时,全选框自动勾选,否则不会勾选

样式截图

代码如下

点击全选实现全部勾选功能

 // 1. 获取大复选框
    const checkAll = document.querySelector('#checkAll')
    // 2. 获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3. 点击大复选框  注册事件
    checkAll.addEventListener('click', function () {
      // 得到当前大复选框的选中状态
      // console.log(checkAll.checked)  // 得到 是 true 或者是 false
      // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked
      }
    })
    // 5. 小复选框控制大复选框

点满复选框自动勾选全选框功能

for (let i = 0; i < cks.length; i++) {
      // 5.1 给所有的小复选框添加点击事件
      cks[i].addEventListener('click', function () {
        // 判断选中的小复选框个数 是不是等于  总的小复选框个数
        // 一定要写到点击里面，因为每次要获得最新的个数
        // console.log(document.querySelectorAll('.ck:checked').length)
        // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })
    }

CSS样式

html格式

 

    

      

         全选
      
      
商品
      
商家
      
价格
    
    

      

        
      
      
小米手机
      
小米
      
￥1999
    
    

      

        
      
      
小米净水器
      
小米
      
￥4999
    
    

      

        
      
      
小米电视
      
小米
      
￥5999