分析:
编写表头复选框的单击事件
在事件中获取表单中所有行的复选框
将行复选框的状态设置与表头复选框状态一致即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{ border: 1px solid black; text-align: center; width: 500px; margin: 0 auto; } table thead tr td{ border: 1px solid black; background: #FFFF00; } table tbody tr td{ border: 1px solid black; } </style> </head> <body> <table> <thead> <tr> <td><input type="checkbox" onclick="changes(this.checked)" id="head" />全选</td> <td>编号</td> <td>姓名</td> <td>年龄</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="checkone"/></td> <td>001</td> <td>佐菲</td> <td>100</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>002</td> <td>初代</td> <td>99</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>003</td> <td>赛文</td> <td>88</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>004</td> <td>艾斯</td> <td>77</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>005</td> <td>杰克</td> <td>66</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>006</td> <td>泰罗</td> <td>55</td> </tr> <tr> <td><input type="checkbox" name="checkone"/></td> <td>007</td> <td>雷欧</td> <td>44</td> </tr> </tbody> </table> </body> <script> //获取所有行 var tbody=document.getElementsByTagName("tbody") for (var i=0;i<tbody[0].rows.length;i++) { if(i%2==0){ tbody[0].rows[i].style.backgroundColor="pink"; }else{ tbody[0].rows[i].style.backgroundColor="red"; } } function changes(checks){ //获取全选框的状态 var checkones=document.getElementsByName("checkone"); if(checks==true){ for (var a=0;a<checkones.length;a++) { checkones[a].setAttribute("checked","checked"); } }else{ for (var a=0;a<checkones.length;a++) { checkones[a].removeAttribute("checked"); } } } </script> </html>