通过点击按钮 对多选框进行选择。 先简单的把按钮写上 联动全选就是如果下面的多选框全部选上了，他就自动选上，在这里我用JavaScript封装成了一个函数， 在点击全选和全不选、反选的时候检查一遍是否全选，然后再每个按钮里面调用，使联动的效果更全面。
<style> * { margin: 0; padding: 0; list-style: none; /*清除a标签的下划线*/ text-decoration: none; /*清除点击边框之后的边框*/ outline: none; } .radio{ width: 500px; height: 200px; } </style> <body> <button id="btn1">全选</button> <button id="btn2">全不选</button> <button id="btn3">反选</button> <!--联动选择--> <input type="checkbox" name="" id="btn4"> <div class="radio"> <input type="checkbox" name="" > <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> </div> </body>JavaScript的代码，首先是获取botton和input的值，这里需要注意的是，我联动选择也是input，再下面的input我用一个div框起来的，就先获取div标签的className，然后再获取div里面的input值
var oBtn1 = document.getElementById('btn1') var oBtn2 = document.getElementById('btn2') var oBtn3 = document.getElementById('btn3') var oBtn4 = document.getElementById('btn4') var oInp = document.getElementsByClassName('radio')[0]; var oInput = oInp.getElementsByTagName('input')封装一个判断下面按钮是否全部选上，如果全部选中，联动按钮就会自动选中，没有全部选中的话，联动按钮就不会选中。
//封装一个判断、联动的函数 function panDuan() { var n=0; //设置一个初始的计数的值 for(var j=0;j<oInput.length;j++){//循环判断每个按钮是否是选中状态 if(oInput[j].checked==true){//如果是选中的计数值加一 n++; } } // console.log(n); // console.log(oInput.length) // console.log(n == oInput.length) if(n == oInput.length){//循环结束判断统计的值和按钮的总数是否相同 oBtn4.checked=true; //相同就确定下面全部选中了，上面的也要选中 }else{ oBtn4.checked=false; } }全选按钮，循环获取每个input使得他们的checked属性都是true
//全选 oBtn1.onclick= function () { for (var i = 0 ; i <oInput.length ; i++){ oInput[i].checked = true; } //判断按钮是true还是false panDuan(); }全不选按钮，循环获取每个input使得他们的checked属性都是false
//全不选 oBtn2.onclick= function () { for (var i = 0 ; i < oInput.length; i++){ oInput[i].checked = false; } panDuan(); } // console.log(oInput[0].checked)反选
//反选 oBtn3.onclick = function () { for (var i = 0 ; i < oInput.length; i++){ console.log(i); // if(oInput[i].checked == true){ // console.log(oInput[i].checked) // oInput[i].checked = false; // } switch (oInput[i].checked) { case false: oInput[i].checked = true; break; case true: oInput[i].checked = false; } } panDuan(); }联动全选
//联动全选 oBtn4.onclick=function () { /*判断他是选中还是没选中*/ if (this.checked == true) { //如果选中，下面全部选中 for (var i = 0; i < oInput.length; i++) { oInput[i].checked = true; } } else { for (var i = 0; i < oInput.length; i++) { oInput[i].checked = false; } } panDuan(); } for(var i=0;i<oInput.length;i++){//循环给每一个按钮加点击事件 oInput[i].onclick=function () { panDuan(); } } </script>