1 <style type="text/css">
2 table {
3 width: 800px;
4 text-align: left;
5 border-collapse: collapse;
6 }
7
8 td, th {
9 padding: 10px;
10 border: 1px solid black;
11 }
12 </style>
13 <script type="text/javascript">
14
15
16 // 反选
17 function choose(tag) {
18 var inputs = document.getElementsByTagName("input");
19 //全选
20 for (var i = 0; i < inputs.length - 3; i++) {
21 var inputNode = inputs[i];
22 if (tag === 1) {
23 if (!inputs[i].checked) {
24 inputs[i].checked = true;
25 }
26 //全不选
27 } else if (tag === -1) {
28 if (inputNode.checked) {
29 inputNode.checked = false;
30 }
31 } else {
32 //反选
33 inputs[i].checked = !inputs[i].checked;
34 }
35 }
36 }
37 </script>
38 </head>
39 <body>
40 <table cellpadding="2" id="tableId">
41 <tr>
42 <th>
43 选择
44 </th>
45 <th>
46 姓名
47 </th>
48 <th>
49 年龄
50 </th>
51 </tr>
52 <tr>
53 <td>
54 <label>
55 <input type="checkbox">
56 </label>
57 </td>
58 <td>
59 张三
60 </td>
61 <td>
62 19
63 </td>
64 </tr>
65 <tr>
66 <td>
67 <input type="checkbox">
68 </td>
69 <td>
70 李四
71 </td>
72 <td>
73 18
74 </td>
75 </tr>
76 <tr>
77 <td>
78 <input type="checkbox">
79 </td>
80 <td>
81 张三
82 </td>
83 <td>
84 18
85 </td>
86 </tr>
87 <tr>
88 <td colspan="3">
89 <input type="button" onclick="choose(1)" value="全选">
90 <input type="button" onclick="choose(-1)" value="全不选">
91 <input type="button" onclick="choose(0)" value="反选">
92 </td>
93 </tr>
94 </table>
