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

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

<table cellspacing='0'>
        <tr>
            <th>
                <input type="checkbox" id="checkAll">全选 
            </th>
            <th>商品</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="single">
            </td>
            <td>钢笔</td>
            <td>￥20.00</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="single">
            </td>
            <td>笔记本</td>
            <td>￥5.00</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="single">
            </td>
            <td>折纸</td>
            <td>￥10.00</td>
        </tr>
    </table>

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

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

<style>
    table,th,tr,td{
        border: 1px solid black;
        text-align: center;
    }
    th{
        background-color: skyblue;
        color: white;
    }
    td{
        background-color: gainsboro;
        color: black;
    }
    th,td{
        padding: 10px;
    }
</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<single.length;i++){
	 /*single[i] 就是每一个小的复选框
	 所以要把每一个小复选框的checked 值 设置为全选按钮的checked值*/
	single[i].checked = checkAll.checked
 }

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

for(let i=0;i<single.length;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完整代码

<script>
	const checkAll = document.querySelector(`#checkAll`)
	const single = document.querySelectorAll(`.single`)
	checkAll.addEventListener('click',function(){
		for(let i=0;i<single.length;i++){
			single[i].checked = checkAll.checked
        }
	})
	for(let i=0;i<single.length;i++){
		single[i].addEventListener('click',function(){
			if(document.querySelectorAll('.single:checked').length == single.length){
				checkAll.checked = true
			}else{
				 checkAll.checked = false
			}
		})
	}
</script>