-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path18.html
More file actions
75 lines (71 loc) · 3.09 KB
/
18.html
File metadata and controls
75 lines (71 loc) · 3.09 KB
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,dl,dt,dd,p{margin:0;padding:0;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:700;}
p{margin-top:10px;}
</style>
<script>
window.onload = function () {
var oCheck = document.getElementsByTagName('dd')[0].getElementsByTagName('input');
var oAll = document.getElementById('checkAll'),
oLabel = document.getElementsByTagName('label')[0];
var oRevert = document.getElementsByTagName('a')[0];
var isCheckAll = function(){
for(var i = 0,n = 0; i < oCheck.length; i++){
oCheck[i].checked && n++;
}
oAll.checked = n == oCheck.length ;
oLabel.innerHTML = oAll.checked? "全不选" : "全选";
};
oAll.onclick = function () {
for(i in oCheck) oCheck[i].checked = this.checked;
oLabel.innerHTML = oLabel.innerHTML == "全选" ? "全不选" : "全选";
};
oRevert.onclick = function(){
for(var i= 0,n =0; i < oCheck.length; i++){
oCheck[i].checked = !oCheck[i].checked;
}
isCheckAll();
};
for(var i = 0; i < oCheck.length; i++){
//()为调用，不是赋值；
//oCheck[i].onclick() = function(){}
oCheck[i].onclick = function () {
isCheckAll();
}
};
}
</script>
</head>
<body>
<main>
<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项（一）</label></p>
<p><input type="checkbox" name="item" /><label>选项（二）</label></p>
<p><input type="checkbox" name="item" /><label>选项（三）</label></p>
<p><input type="checkbox" name="item" /><label>选项（四）</label></p>
<p><input type="checkbox" name="item" /><label>选项（五）</label></p>
<p><input type="checkbox" name="item" /><label>选项（六）</label></p>
<p><input type="checkbox" name="item" /><label>选项（七）</label></p>
<p><input type="checkbox" name="item" /><label>选项（八）</label></p>
<p><input type="checkbox" name="item" /><label>选项（九）</label></p>
<p><input type="checkbox" name="item" /><label>选项（十）</label></p>
</dd>
</dl>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</main>
</body>
</html>