主要知识点:
prop()--主要检查和设置checked
attr()是针对所有属性,prop()是针对checked和selected等单一存在的,判断他们的true或者false。
find()是在子子孙孙中去查找
$(元素).each(){}--循环每个元素,可以这样用;循环一个数组,就要$.each(arry,function(){})。
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()"/>
<input type="button" value="反选" onclick="CheckReverse()"/>
<input type="button" value="取消" onclick="CheckCancel()"/>
<table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>33</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function CheckAll(){
$('#tb1').find(':checkbox').prop('checked',true);
}
function CheckReverse(){
$('#tb1').find(':checkbox').each(function(){
//$(this)=每一个复选框
//$(this).prop('checked')如果选中,true,否则false
if ($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
function CheckCancel(){
$('#tb1').find(':checkbox').prop('checked',false);
}
</script>
</body>
</html>
效果: