<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格全选</title> <style> table { border: 1px solid; width: 500px; margin-left: 30%; } td, th { text-align: center; border: 1px solid; } div { margin-top: 10px; margin-left: 30%; } .over{ background-color:pink; } .out{ background-color: #EEEEEE; } </style> <script> /* * 分析： * 1、全选 * *获取所有的checkbox * *遍历cb，设置每一个cb的状态为选中状态 checked=true * 2、全不选 * *获取所有的checkbox * *遍历cb，设置每一个cb的状态为非选中状态 checked=false * */ // 1、页面加载完毕后绑定事件 window.onload = function (fori) { // 2、给全选按钮绑定单击事件 document.getElementById("selectAll").onclick = function () { // 全选 // 3、获取所有的checkbox var cbs = document.getElementsByName("cb"); // 4、遍历 for (var i = 0; i < cbs.length; i++) { // 5、设置每一个checked属性 cbs[i].checked = true; } } // 2、给全不选按钮绑定单击事件 document.getElementById("unSelectAll").onclick = function () { // 全不选 // 3、获取所有的checkbox var cbs = document.getElementsByName("cb"); // 4、遍历 for (var i = 0; i < cbs.length; i++) { // 5、设置每一个checked属性 cbs[i].checked = false; } } // 2、给反选按钮绑定单击事件 document.getElementById("selectRev").onclick = function () { // 反选 // 3、获取所有的checkbox var cbs = document.getElementsByName("cb"); // 4、遍历 for (var i = 0; i < cbs.length; i++) { // 5、设置每一个checked属性 cbs[i].checked = !cbs[i].checked; } } document.getElementById("firstCb").onclick = function () { // 3、获取所有的checkbox var cbs = document.getElementsByName("cb"); // 4、遍历 for (var i = 0; i < cbs.length; i++) { // 5、设置每一个checked属性与第一个相同 cbs[i].checked = this.checked; } } // 给所有的tr绑定鼠标移到元素之上和移出元素事件 var trs = document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ trs[i].onmouseover =function () { this.className ="over"; } trs[i].onmouseout =function () { this.className="out"; } } } </script></head><body><table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="firstCb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr></table><div> <input type="button" id="selectAll" value="全选"> <input type="button" id="unSelectAll" value="全不选"> <input type="button" id="selectRev" value="反选"></div></body></html>
来源：https://www.cnblogs.com/newcityboy/p/11407800.html