文章目录
1.三个按钮：全选 全不选 反选
2.第一个复选框：全选和全不选
3.鼠标移入变色，移出复原
一、html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.over{
background-color:deeppink;
}
.out{
background-color:white;
}
</style>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<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>
二、js部分
<script>
window.onload=function () {
/*按钮全选实现步骤：
* 1.获取“全选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性赋值true
*/
let check = document.getElementsByName("cb");
document.getElementById("selectAll").onclick=function () {
check.forEach(e =>e.checked=true)
}
/*按钮全不选实现步骤：
* 1.获取“全不选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性赋值false
*/
document.getElementById("unSelectAll").onclick=function () {
check.forEach(e =>e.checked=false)
}
/*按钮反选实现步骤：
* 1.获取“反选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性 取非
*/
document.getElementById("selectRev").onclick=function () {
check.forEach(e =>e.checked=!e.checked)
};
/*第一个复选框带动其它复选框全选和全不选实现步骤：
* 1.获取“第一个复选框”这个元素 firstCheckBox
* 2.给 firstCheckBox 绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，让所有复选框元素的checked属性 和 第一个复选框的 checked属性相同
*/
document.getElementById("firstCb").onclick=function () {
check.forEach(e =>e.checked=this.checked)
}
/*鼠标移入移出变色功能实现步骤：
1.获取table中所有的tr元素
2.使用循环遍历给每一个tr元素绑定onmouseover和onmouseout事件
3.在style标签中事先写好.over和.out的背景颜色样式，分别是粉红色和白色
4.在鼠标移入和移出事件实现中，分别让tr元素的class值分别为over和out
*/
let tr = document.getElementsByTagName("tr");
for (let i = 0; i < tr.length; i++) {
tr[i].onmouseover=function () {
this.className="over"
}
tr[i].onmouseout=function () {
this.className="out"
}
}
}
</script>