JS复选框全选和反选（全选框联动）.html

最新推荐文章于 2022-08-28 20:54:31 发布

欧阳丶先森

最新推荐文章于 2022-08-28 20:54:31 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：复选框全选和反选

本文链接：https://blog.youkuaiyun.com/qq_41660116/article/details/79214341

本文介绍了一个简单的HTML页面，该页面通过JavaScript实现了表格数据的选择功能，包括全选、反选以及全选框与各选项之间的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function() {
//全选
//获取全选框
var all = document.getElementsByName("mech");
//获取每一行的副旋律
var checks = document.getElementsByName("Ch");
all[0].onclick = function() {
//循环遍历每一行的复选框
for(var i = 0; i < checks.length; i++) {
//先判断是否是复选框
if(checks[i].type == "checkbox") {
//将全选框的状态赋值给每一行的复选框
checks[i].checked = all[0].checked;
}
}
}
//反选
//获取反选按钮
var btn = document.getElementById("btn");
btn.onclick = function() {
//定义个变量选中的存复选框长度
var checLen = 0;
//循环遍历
for(var i = 0; i < checks.length; i++) {
//选中状态
if(checks[i].checked == true) {
//选中时改为假
checks[i].checked = false;
//将选中的复选框长度变量-1
checLen--;
} else {
//未选中改为真
checks[i].checked = true;
//将选中的复选框长度变量+1；
checLen++;
}
}
//遍历结束后判断长度变是否等于复选框的长度
if(checLen == checks.length) {
//如果相等则全选框为选中
all[0].checked = true;
//同时将长度变量赋值为0
checLen = 0;
} else {
//不相等则全选框不选中
all[0].checked = false;
}
}
//全选框联动
function allChe() {
for(var i = 0; i < checks.length; i++) {
//定义个变量存选中的复选框长度
var checLen = 0
//给每个复选框加点击事件
checks[i].onclick = function() {
//自调用
allChe();
//循环判断复选是否被选中
for(var j = 0; j < checks.length; j++) {
if(checks[j].checked == true) {
//选中时将长度变量+1
checLen++;
} else if(checks[j].checked == false) {
//未选中将长度变量-1
checLen--;
}
}
//遍历结束后判断长度变是否等于复选框的长
if(checLen == checks.length) {
//如果相等则全选框为选中
all[0].checked = true;
//同时将长度变量赋值为0
checLen = 0;
} else {
//不相等则全选框不选中
all[0].checked = false;
}
}
}
}
//先调用一次
allChe();
}
</script>
</head>

<body>
<table>
<tr>
<th><input type="checkbox" name="mech" /></th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<tr>
<td><input type="checkbox" name="Ch" /></td>
<td>001</td>
<td>A</td>
<td>35</td>
<td>20</td>
<td>700</td>
</tr>
<tr>
<td><input type="checkbox" name="Ch" /></td>
<td>002</td>
<td>B</td>
<td>18</td>
<td>10</td>
<td>180</td>
</tr>
<tr>
<td><input type="checkbox" name="Ch" /></td>
<td>003</td>
<td>C</td>
<td>10</td>
<td>23</td>
<td>230</td>
</tr>
<tr>
<td><input type="checkbox" name="Ch" /></td>
<td>004</td>
<td>D</td>
<td>10</td>
<td>23</td>
<td>230</td>
</tr>
<tr>
<td><input type="checkbox" name="Ch" /></td>
<td>005</td>
<td>E</td>
<td>10</td>
<td>23</td>
<td>230</td>
</tr>
</table>
<button id="btn">反选</button>
</body>

</html>

//ps:学生娃偶然的想法如有侵权请联系我！如有不对请指正 ~。~ 谢谢!