<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>T64-实现全选</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrap {
300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color:rgb(51, 199, 18);
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadCheckbox" />
</th>
<th>快递</th>
<th>收件人</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>顺丰</td>
<td>张大大</td>
<td>186*****897
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>韵达</td>
<td>张全蛋</td>
<td>186*****897
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>圆通</td>
<td>韩非</td>
<td>186*****897
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>中国邮政</td>
<td>卫庄</td>
<td>186*****897
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var theadCheckbox = document.getElementById("theadCheckbox");//获得实现全选的复选框
var tbody = document.getElementById("tbody");
var myCheckbox = tbody.getElementsByTagName("input");//获得tbody里的所有复选框
theadCheckbox.onclick = function() {
for(var i = 0; i < myCheckbox.length; i++) {
myCheckbox[i].checked = this.checked;
}
}}
</script>
</html>
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>T64-实现全选</title>
6 <style type="text/css">
7 * {
8 padding: 0;
9 margin: 0;
10 }
11
12 .wrap {
13 300px;
14 margin: 100px auto 0;
15 }
16
17 table {
18 border-collapse: collapse;
19 border-spacing: 0;
20 border: 1px solid #c0c0c0;
21 300px;
22 }
23
24 th,
25 td {
26 border: 1px solid #d0d0d0;
27 color: #404060;
28 padding: 10px;
29 }
30
31 th {
32 background-color:rgb(51, 199, 18);
33 font: bold 16px "微软雅黑";
34 color: #fff;
35 }
36
37 td {
38 font: 14px "微软雅黑";
39 }
40
41 tbody tr {
42 background-color: #f0f0f0;
43 }
44
45 tbody tr:hover {
46 cursor: pointer;
47 background-color: #fafafa;
48 }
49 </style>
50
51
52
53
54 </head>
55 <body>
56 <div class="wrap">
57 <table>
58 <thead>
59 <tr>
60 <th>
61 <input type="checkbox" id="theadCheckbox" />
62 </th>
63 <th>快递</th>
64 <th>收件人</th>
65 <th>电话</th>
66 </tr>
67 </thead>
68 <tbody id="tbody">
69 <tr>
70 <td>
71 <input type="checkbox" />
72 </td>
73 <td>顺丰</td>
74 <td>张大大</td>
75 <td>186*****897
76 </tr>
77 <tr>
78 <td>
79 <input type="checkbox" />
80 </td>
81 <td>韵达</td>
82 <td>张全蛋</td>
83 <td>186*****897
84 </tr>
85 <tr>
86 <td>
87 <input type="checkbox" />
88 </td>
89 <td>圆通</td>
90 <td>韩非</td>
91 <td>186*****897
92 </tr>
93 <tr>
94 <td>
95 <input type="checkbox" />
96 </td>
97 <td>中国邮政</td>
98 <td>卫庄</td>
99 <td>186*****897
100 </tr>
101 </tbody>
102 </table>
103 </div>
104
105 </body>
106
107 <script type="text/javascript">
108 window.onload = function() {
109
110 var theadCheckbox = document.getElementById("theadCheckbox");//获得实现全选的复选框
111
112 var tbody = document.getElementById("tbody");
113
114 var myCheckbox = tbody.getElementsByTagName("input");//获得tbody里的所有复选框
115
116
117 theadCheckbox.onclick = function() {
118
119 for(var i = 0; i < myCheckbox.length; i++) {
120 myCheckbox[i].checked = this.checked;
121 }
122 }}
123
124
125
126
127 </script>
128
129 </html>
View Code