-
Notifications
You must be signed in to change notification settings - Fork 1
/
17-表单属性操作-全选反选-html.html
172 lines (150 loc) · 5.3 KB
/
17-表单属性操作-全选反选-html.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script>
window.onload = function () {
//需求1：点击上面的多选按钮，下面的多选按钮联动。（上面的被选中，下面的也被选中。上面的被取消，下面的联动被取消）
//需求2：点击下面的每一个多选按钮，都要进行判断，只有下面的所有按钮全部被选定，上面的才被选定。如果有一个没有被选定的，上面的也不被选定。
//需求1：点击上面的多选按钮，下面的多选按钮联动。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序（给指定元素添加checked属性）
//1.获取事件源和相关元素
var tbody = document.getElementById("tbody");
var inpBottomArr = tbody.getElementsByTagName("input");
var theadInp = document.getElementById("theadInp");
// //2.绑定事件//改完以后才触动的onclick事件
// theadInp.onclick = function () {
// //3.书写事件驱动程序（给指定元素添加checked属性）
// //判断：如果原来是false，现在变成true；如果原来是true，现在变成false:
// if(this.checked == true){
// //for循环操作checked属性
// for(var i=0;i<inpBottomArr.length;i++){
// inpBottomArr[i].checked = true;
// }
// }else{
// //for循环操作checked属性
// for(var i=0;i<inpBottomArr.length;i++){
// inpBottomArr[i].checked = false;
// }
// }
// }
//简单版。
theadInp.onclick = function () {
//上面的值是什么，下面的跟着就可以了。（不需要判断了）
for(var i=0;i<inpBottomArr.length;i++){
inpBottomArr[i].checked = this.checked;
}
}
//需求2：点击下面的每一个多选按钮，都要进行判断，只有下面的所有按钮全部被选定，上面的才被选定。如果有一个没有被选定的，上面的也不被选定。
//步骤：（思路：1.所有被选中的个数为4个，让上面被选中。）
//步骤：（思路：2.开闭原则，只要下面的按钮有一个是false，上面的也是。）
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
//2.绑定事件(为下面的每一个input绑定事件)
for(var i=0;i<inpBottomArr.length;i++){
inpBottomArr[i].onclick = function () {
//3.书写事件驱动程序
//开闭原则，只要下面的按钮有一个是false，上面的也是。
var bool = true;
//判断，利用for循环判断，有一个checked属性值为false，上面的也是false；
for(var j=0;j<inpBottomArr.length;j++){
if(inpBottomArr[j].checked == false){
bool = false;
}
}
//为上面的input赋值。
theadInp.checked = bool;
}
}
}
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadInp" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>地三鲜</td>
<td>好嫂子</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>好嫂子</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>醋溜土豆丝</td>
<td>好嫂子</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>拍黄瓜</td>
<td>好嫂子</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>