<script>//获取元素var cbAll = document.getElementById('cbAll');//全选按钮var cbItem = document.getElementById('tbBox').getElementsByTagName('input');//所有复选框按钮//注册事件//全选
cbAll.onclick=function(){for(var i =0; i < cbItem.length; i++){
cbItem[i].checked =this.checked;}}//反选for(var i =0; i < cbItem.length; i++){
cbItem[i].onclick=function(){var flag =true;//控制全选按钮// 每次点击复选框都要检查是否全选for(var i =0; i < cbItem.length; i++){//有一个多选框的值为false,就把flag设置为falseif(!cbItem[i].checked){
flag =false;break;}}
cbAll.checked = flag;}}</script>
jq实现如下:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>//全选$("#cbAll").click(function(){var flag =this.checked;$('#tbBox input').prop('checked', flag);});//反选$('#tbBox input').click(function(){$("#cbAll").prop('checked',$('#tbBox input').length ==$('#tbBox input:checked').length);});</script>