通过JavaScript实现页面复选框反选功能？
下面有个表格：
表格代码如下：
<table>
<thead>
<tr>
<th><input type="checkbox" id="check"/>反选</th>
<th>班级类型</th>
<th>开班时间</th>
<th>开班状态</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-08-31</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-09-11</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-08-05</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-09-28</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-11-11</td>
<td>即将开班</td>
</tr>
</tbody>
</table>
功能需求：实现反选功能
效果如下：
功能实现思路一：
- 为id="check"绑定click事件；
- 找到所有需要控制的input元素
- 通过循环遍历找到tbody中每个input
- 更改input的checked的值，如：false改为true
JavaScript代码如下：
<script>
// 为id="check"绑定click事件；
document.getElementById('check').onclick = function(){
// 找到所有需要控制的input元素
var inp = document.getElementsByTagName('input');
// 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
for(i=1; i <= inp.length; i++){
// 更改input的checkbox的值，如：false改为true,true改为false
if( inp[i].checked == true){
inp[i].checked = false;
}else{
inp[i].checked = true;
}
}
}
</script>
代码简化版：
<script>
// 为id="check"绑定click事件；
document.getElementById('check').onclick = function(){
// 找到所有需要控制的input元素
var inp = document.getElementsByTagName('input');
// 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
for(i =1; i <= inp.length; i++){
// checked值去反
inp[i].checked = !inp[i].checked;
}
}
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过JS实现反选功能|web前端高手班 http://web.itheima.com</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="check"/>反选</th>
<th>班级类型</th>
<th>开班时间</th>
<th>开班状态</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-08-31</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-09-11</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-08-05</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-09-28</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-11-11</td>
<td>即将开班</td>
</tr>
</tbody>
</table>
<script>
// 为id="check"绑定click事件；
document.getElementById('check').onclick = function(){
// 找到所有需要控制的input元素
var inp = document.getElementsByTagName('input');
// 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
for(i =1; i <= inp.length; i++){
// checked值去反
inp[i].checked = !inp[i].checked;
}
}
</script>
</body>
</html>
想想上面表格如何实现鼠标悬浮对应表格变色呢？
可以参考下面文章：
浙公网安备 33010602011771号