js/jquery--实现全选、不全选
关正雅
为了熟悉一下table标签，所以这里用了table标签
思路：1.为全选多选框添加点击事件，判断该选框的checked属性（是否被点击），然后遍历tbody下的多选框，它们的checked属性与全选的相等
2.遍历tbody下的多选框，定义一个变量用来存储tbody下的多选框是否都被选中了（如果有一个或多个没有被选中则为false）；然后再次遍历tbody下的多选框，判断是否有多选框没有选中，如果有没选中的则设置flag为false；最后设置全选的checked为flag。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
margin: 50px auto;
}
.check {
margin-top: 20px;
}
th {
text-align: left;
}
tr {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="main">
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>全选</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td><input type="checkbox" name="class" value="java"></td>
<td>java</td>
</tr>
<tr>
<td><input type="checkbox" name="class" value="c++"></td>
<td>c++</td>
</tr>
<tr>
<td><input type="checkbox" name="class" value="web前端"></td>
<td>web前端</td>
</tr>
<tr>
<td><input type="checkbox" name="class" value="从入门到放弃"></td>
<td>从入门到放弃</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
// 下面是用原生js
/*// 获取全选多选框
var all = document.getElementById("checkAll");
// 获取tbody下的input
var inputs = document.getElementById("t_body").getElementsByTagName("input");
// inputs的长度
var len = inputs.length;
// 为全选多选框添加点击事件
all.onclick = function () {
for(let i = 0; i < len; i ++) {
// 为每个多选框的checked都与全选all的checked相等
inputs[i].checked = this.checked;
}
}
// 为tbody下的多选框添加点击事件
for(let i = 0; i < len; i ++) {
inputs[i].onclick = function () {
// 默认全部选中
var flag = true;
// 再次遍历，然后判断是否有选框还没有选中的，如果有，则设置flag为false
for(let j = 0; j < len; j ++) {
if(!inputs[j].checked) {
flag = false;
}
}
all.checked = flag;
}
}*/
// 这是用jquery
$(function() {
// 获取全选多选框
var $all = $("#checkAll");
// 获取tbody下的input
var $inputs = $("#t_body").find("input");
// inputs的长度
var $len = $inputs.length;
// 为all添加点击事件
$all.on("click", function() {
// 因为属性是checked所以要用prop，如果用attr，有问题
$inputs.prop("checked",this.checked);
});
// 为每个tbody下的input添加点击事件
$inputs.on("click", function() {
// 定义一个变量，默认为true
var flag = true;
/*这里如果直接用$inputs获取checked，只能获取第一个input的值，jquery的隐式迭代，设置的时候，都设置相同的值，而获取的时候，只获取第一个中的值*/
// 所以还是要用for循环遍历inputs
for(let i = 0; i < $len; i ++) {
// $inputs[i]返回的是DOM对象
if(!$inputs[i].checked){
flag = false;
}
}
$all.prop("checked",flag);
});
});
</script>
</body>
</html>
类似资料：