首页 > 代码库 > js多选全选

js多选全选

2024-09-18 23:14:13   215人阅读

 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>

技术分享

js多选全选


联系
我们