【JavaScript】实现全选和反选功能

html部分（因为是表格，也可以用JS来遍历实现）

        

            

                全选 
            
            
商品
            
价格
        
        

            

                
            
            
钢笔
            
￥20.00
        
        

            

                
            
            
笔记本
            
￥5.00
        
        

            

                
            
            
折纸
            
￥10.00
        
    

注意：全选框的id名为 checkAll
           小复选框的类名为 single

style部分（太基础不做解释）

此时的效果为

JS部分

第一步:先实现 点击全选按钮的时候 让全选按钮的状态 与 下边小复选框的状态保持一致
1、先把全选按钮 和 小的复选框获取过来

//全选按钮
 const checkAll = document.querySelector(`#checkAll`)
 //小复选框
 const single = document.querySelectorAll(`.single`)

2、给全选按钮注册一个点击事件

checkAll.addEventListener('click',function(){})

这里可以通过checkAll.checked来查看一下全选按钮选中时和未选中时的状态

console.log(checkAll.checked)

4、让下边小的复选框的状态 跟 全选按钮的状态 保持一致就可以了
      所以要把这个选中的状态 设置给每一个小的复选框
要遍历得到每一个小复选框

for(let i=0;i

第二步：要实现反选的功能
即拿小的复选框的状态来决定 全选复选框的状态
            当小复选框全都选择的时候，全选框自动勾选
            当有任何一个小复选框没有选择的话，全选框就不会勾选
首先要遍历得到每一个小的复选框

for(let i=0;i

需要给每一个小的复选框 去注册一个点击事件

single[i].addEventListener('click',function(){}

可以通过 :checked 直接拿到选中的复选框

document.querySelectorAll('.single:checked')
//打印看一下
console.log(document.querySelectorAll('.single:checked'));

什么时候去判断这个结果呢？每点击一个小复选框的时候 都需要去判断一下的
            这里进行判断，当每一个小复选框都勾选的时候就将全选的状态变为true
            如果有任何一个小复选框没选中，全选框的状态就为false

 if(document.querySelectorAll('.single:checked').length == single.length){
 	checkAll.checked = true
 }else{
	//如果有任何一个小复选框没选中，就不能让全选框选中
	checkAll.checked = false
}

JS完整代码