JS全选反选案例
我们在进行网页制作的时候，通常会用到复选框，而复选框外面往往
有一个大的勾选框来，控制里面的框是否全部选择，而里面的小复选框同时也是在控制着外面大的选择框，当里面全选的时候，外面的也会勾选上，今天我们了了解如何实现，这个功能：
代码展示如下：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>//获取大的复选框const checkAll = document.querySelector('#checkAll')//获取小的复选框const cks = document.querySelectorAll('.ck')checkAll.addEventListener('click',function() {//遍历小复选框for(let i = 0; i < cks.length; i++) {//让所有的小复选框同大复选框一同变化//下面这句的意思是让外面大的选择框有checked的时候里面的小复选框也同时加上这个属性cks[i].checked = checkAll.checked}})for(let i = 0; i < cks.length; i++) {cks[i].addEventListener('click',function() {//=后面返回的是false或truecheckAll.checked = document.querySelectorAll('.ck:checked').length === cks.length})}</script>
</body></html>