今天在进行HTML的table练习的时候，发现一个比较有趣的知识点，有关于复选框的全选、全不选，以及单选操作的相关问题。
待我上网搜索了一下相关资料，发现有关于全选以及全不选的详解还是挺多的，但是复选框与全选的联动却很少有人解释。
接下来我就先和大家说说全选以及全不选的相关代码分享。
function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("box");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}
附图如下
以上是有关于全选和全不选的相关源代码以及相对应的代码注释。通过这个方法，我们可以在点击全选按钮的时候分别实现全选以及全不选的情况。
然后接下来就和大家分享全选复选框和其他复选框的联动。
function check(){//1.获取编号前面的复选框var checkOnes = document.getElementsByName("checkOne");//2.设置一个计数器var a=0;//3.获取全选框的状态var checkAllEle = document.getElementById("box");//4.获取下面所有的复选框for(var i=0;i<checkOnes.length;i++){//5.如果复选框的状态是未选中if(checkOnes[i].checked==false){//6.设置全选框的状态为未选中checkAllEle.checked=false;//7.执行完毕关闭循环break;}//8.如果循环条件不成立，计数器加一a++;}//9.判断计数器是否与复选框的的数量相等if(a==checkOnes.length){//10.如果相等则设置全选框的状态为已选中checkAllEle.checked=true;}}
附图如下
通过这个方法，我们可以实现复选框和全选框的联动，复选框没有全部选中时，全选框就不会被选中，若复选框全部被选中，那么相对应的，全选框就会自动选中。
最后吧整个文件的源码一并分享，希望能帮助到爱学习的你！
<html><head><meta charset="utf-8" /><script>function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("box");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}function check(){//1.获取编号前面的复选框var checkOnes = document.getElementsByName("checkOne");//2.设置一个计数器var a=0;//3.获取全选框的状态var checkAllEle = document.getElementById("box");//4.获取下面所有的复选框for(var i=0;i<checkOnes.length;i++){//5.如果复选框的状态是未选中if(checkOnes[i].checked==false){//6.设置全选框的状态为未选中checkAllEle.checked=false;//7.执行完毕关闭循环break;}//8.如果循环条件不成立，计数器加一a++;}//9.判断计数器是否与复选框的的数量相等if(a==checkOnes.length){//10.如果相等则设置全选框的状态为已选中checkAllEle.checked=true;}}</script></head><body><table style="text-align:center;" width="600" border="1" cellspacing="0" cellpadding="0" id="main"><form action="" method="post"><tr><td><input type="checkbox" id="box" onclick="checkAll()" />全选</td><td>产品名称</td><td>价格（元）</td><td>数量</td></tr><tr><td><input type="checkbox" onclick="check()" name="checkOne"/></td><td>诺基亚N95手机</td><td>2589</td><td>6</td></tr><tr><td><input type="checkbox" onclick="check()" name="checkOne"/></td><td>佳能数码相机</td><td>1865</td><td>5</td></tr><tr><td><input type="checkbox" onclick="check()" name="checkOne" /></td><td>戴尔新版键盘</td><td>60</td><td>56</td></tr><tr><td><input type="checkbox" onclick="check()" name="checkOne"/></td><td>联想折叠式笔记本电脑桌</td><td>59</td><td>10</td></tr><tr><td><input type="checkbox" id="box5" onclick="check()" name="checkOne"/></td><td>康佳32寸液晶电视</td><td>2945</td><td>3</td></tr><tr><td><input type="checkbox" id="box6" onclick="check()" name="checkOne"/></td><td>九阳五谷系列豆浆机</td><td>299</td><td>8</td></tr><tr><td colspan="5" style="height:35px;"><input name="fulls" type="button" value="删除选中产品"/></td></tr></form> </table></body></html>
友情提示：最后的删除按钮没有添加点击事件。
