<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> </head> <body> <table> <tr> <td> <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox"> </td> </tr> <tr> <td> <input id="check0" type="checkbox"> </td> </tr> <tr> <td> <input id="check1" type="checkbox"> </td> </tr> <tr> <td> <input id="check2" type="checkbox"> </td> </tr> <tr> <td> <input id="check3" type="checkbox"> </td> </tr> <tr> <td> <input id="check4" type="checkbox"> </td> </tr> </table> <script> var allCheck=document.getElementById("allCheck"); allCheck.addEventListener("click",clickHandler); for(var i=0;i<5;i++){ var check=document.getElementById("check"+i); check.addEventListener("click",clickHandler) } function clickHandler(e) { if(this===allCheck){ for(var i=0;i<5;i++){ var check=document.getElementById("check"+i); // 让所有的多选框的checked都和全选的checked相同 check.checked=allCheck.checked; } return;//终结后面的代码 } for(var j=0;j<5;j++){ var checks=document.getElementById("check"+j); if(!checks.checked){ allCheck.checked=false; return; } } allCheck.checked=true; } </script> </body> </html> 来源：博客园
作者：吴小明的博客
链接：https://www.cnblogs.com/wuqilang/p/11818524.html