//全选 反选 不选可用type=button
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> * { padding: 0; margin: 0; } .wrap { 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color:rgb(51, 199, 18); font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" />全选 </th> <th> <input type="checkbox" id="closeinput" />全不选 </th> <th> <input type="checkbox" id="inrevt" />反选 </th> <th>快递</th> <th>收件人</th> <th>电话</th> </tr> </thead> <tbody id="tbody"> <tr> <td> <input type="checkbox" /> </td> <td> </td> <td> </td> <td>顺丰</td> <td>张大大</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td> </td> <td> </td> <td>韵达</td> <td>张全蛋</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td> </td> <td> </td> <td>圆通</td> <td>韩非</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td> </td> <td> </td> <td>中国邮政</td> <td>卫庄</td> <td>186*****897 </tr> </tbody> </table> </div> <script type="text/javascript"> window.onload=function(){ var allinput=document.getElementById("theadInp"); var closeinput=document.getElementById("closeinput"); var inputinrevt=document.getElementById("inrevt"); var inputpt=document.getElementById("tbody"); var inputlist=inputpt.getElementsByTagName("input"); // 监听全选 allinput.onclick=function(){ for (var i=0;i<inputlist.length;i++) { inputlist[i].checked=this.checked; if (this.checked==true) { closeinput.checked=false; inputinrevt.checked=false; } } } // 全不选 closeinput.onclick=function(){ for (var i=0;i<inputlist.length;i++) { inputlist[i].checked=false; if (this.checked==true) { allinput.checked=false; inputinrevt.checked=false; } } }; // 反选 inputinrevt.onclick=function(){ var index=0; closeinput.checked=false; allinput.checked=false; for (var i=0;i<inputlist.length;i++) { // allinput.checked=true; // 获取选中js数 if (inputlist[i].checked==true) { // index++; // if (index==inputlist.length) { // allinput.checked=false; // }else{ // allinput.checked=true; // } inputlist[i].checked=false; } else{ inputlist[i].checked=true; } } } //取消其中一个 for(var i=0;i<inputlist.length;i++){ inputlist[i].onclick=function(){ var flag=true; for (var j=0;j<inputlist.length;j++) { if (inputlist[j].checked==false) { flag=false; break; } } console.log(flag) allinput.checked=flag; } } } </script> </body> </html>