全选Checkbox实现代码
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3<HEAD>
4<TITLE> checkAllItem </TITLE>
5<META NAME="Generator" CONTENT="EditPlus">
6<META NAME="Author" CONTENT="">
7<META NAME="Keywords" CONTENT="">
8<META NAME="Description" CONTENT="">
9<script language="javascript" type="text/javascript">
10function checkItem()
11{
12 var names = new Array(15);
13 names[0] = document.getElementById('checkbox1');
14 names[1] = document.getElementById('checkbox2');
15 names[2] = document.getElementById('checkbox3');
16 names[3] = document.getElementById('checkbox4');
17 names[4] = document.getElementById('checkbox5');
18 names[5] = document.getElementById('checkbox6');
19 names[6] = document.getElementById('checkbox7');
20 names[7] = document.getElementById('checkbox8');
21 names[8] = document.getElementById('checkbox9');
22 names[9] = document.getElementById('checkbox10');
23 names[10] = document.getElementById('checkbox11');
24 names[11] = document.getElementById('checkbox12');
25 names[12] = document.getElementById('checkbox13');
26 names[13] = document.getElementById('checkbox14');
27 names[14] = document.getElementById('checkbox15');
28
29 var id = document.getElementById('chkSelectAll');
30 var a=15;
31 for(var i=0;i<15;i++)
32 {
33 if(!names[i].checked)
34 {
35 id.checked = false;
36 a=a-1;
37 }
38 }
39 if(a==15){
40 id.checked = true;
41 }
42}
43
44function SelectAllItem(itemName)
45{
46
47 var aa = document.getElementsByName(itemName);
48 var id = document.getElementById('chkSelectAll');
49 for (var i=0; i<aa.length; i++)
50 {
51 aa[i].checked = id.checked;
52 }
53}
54</script>
55</HEAD>
56
57<BODY>
58 <table width="97%" border="1">
59 <tr>
60 <th width="4%" class="JobStatLabel" scope="col"> </th>
61 <th width="3%" class="JobStatLabel" scope="col">No.</th>
62 <th width="23%" class="JobStatLabel" scope="col">製品名</th>
63 <th width="15%" class="JobStatLabel" scope="col">製品番号</th>
64 <th width="19%" class="JobStatLabel" scope="col">メーカー名</th>
65 <th width="8%" class="JobStatLabel" scope="col">数量</th>
66 <th width="8%" class="JobStatLabel" scope="col">単価</th>
67 <th width="18%" class="JobStatLabel" scope="col">金額</th>
68 </tr>
69 <tr>
70 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox1" onClick="checkItem(this)" /></td>
71 <td align="center">1</td>
72 <td>製品名0001</td>
73 <td>製品番号0001</td>
74 <td>メーカー名0001</td>
75 <td align="right">20</td>
76 <td align="right">1000</td>
77 <td align="right">20000</td>
78 </tr>
79 <tr class="tdEven">
80 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox2" onClick="checkItem(this)" /></td>
81 <td align="center">2</td>
82 <td >製品名0002</td>
83 <td >製品番号0002</td>
84 <td >メーカー名0002</td>
85 <td align="right" >30</td>
86 <td align="right" >1000</td>
87 <td align="right" >30000</td>
88 </tr>
89 <tr>
90 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox3" value="checkbox" onClick="checkItem(this)" /></td>
91 <td align="center">3</td>
92 <td>製品名0003</td>
93 <td>製品番号0003</td>
94 <td>メーカー名0003</td>
95 <td align="right">20</td>
96 <td align="right">1000</td>
97 <td align="right">20000</td>
98 </tr>
99 <tr class="tdEven">
100 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox4" value="checkbox" onClick="checkItem(this)" /></td>
101 <td height="16" align="center">4</td>
102 <td >製品名0004</td>
103 <td >製品番号0004</td>
104 <td >メーカー名0004</td>
105 <td align="right" >30</td>
106 <td align="right" >1000</td>
107 <td align="right" >30000</td>
108 </tr>
109 <tr>
110 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox5" value="checkbox" onClick="checkItem(this)" /></td>
111 <td align="center">5</td>
112 <td>製品名0005</td>
113 <td>製品番号0005</td>
114 <td>メーカー名0005</td>
115 <td align="right">20</td>
116 <td align="right">1000</td>
117 <td align="right">20000</td>
118 </tr>
119 <tr class="tdEven">
120 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox6" value="checkbox" onClick="checkItem(this)" /></td>
121 <td align="center">6</td>
122 <td>製品名0005</td>
123 <td>製品番号0006</td>
124 <td>メーカー名0006</td>
125 <td align="right">20</td>
126 <td align="right">1000</td>
127 <td align="right">20000</td>
128 </tr>
129 <tr>
130 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox7" value="checkbox" onClick="checkItem(this)"/></td>
131 <td align="center">7</td>
132 <td>製品名0005</td>
133 <td>製品番号0007</td>
134 <td>メーカー名0007</td>
135 <td align="right">20</td>
136 <td align="right">1000</td>
137 <td align="right">20000</td>
138 </tr>
139 <tr class="tdEven">
140 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox8" value="checkbox" onClick="checkItem(this)" /></td>
141 <td align="center">8</td>
142 <td>製品名0005</td>
143 <td>製品番号0008</td>
144 <td>メーカー名0008</td>
145 <td align="right">20</td>
146 <td align="right">1000</td>
147 <td align="right">20000</td>
148 </tr>
149 <tr>
150 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox9" value="checkbox" onClick="checkItem(this)" /></td>
151 <td align="center">9</td>
152 <td>製品名0005</td>
153 <td>製品番号0009</td>
154 <td>メーカー名0009</td>
155 <td align="right">20</td>
156 <td align="right">1000</td>
157 <td align="right">20000</td>
158 </tr>
159 <tr class="tdEven">
160 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox10" value="checkbox" onClick="checkItem(this)" /></td>
161 <td align="center">10</td>
162 <td>製品名0005</td>
163 <td>製品番号0010</td>
164 <td>メーカー名0010</td>
165 <td align="right">20</td>
166 <td align="right">1000</td>
167 <td align="right">20000</td>
168 </tr>
169 <tr>
170 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox11" onClick="checkItem(this)" /></td>
171 <td align="center">11</td>
172 <td>製品名0005</td>
173 <td>製品番号0011</td>
174 <td>メーカー名0011</td>
175 <td align="right">20</td>
176 <td align="right">1000</td>
177 <td align="right">20000</td>
178 </tr>
179 <tr class="tdEven">
180 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox12" value="checkbox" onClick="checkItem(this)"/></td>
181 <td align="center">12</td>
182 <td>製品名0005</td>
183 <td>製品番号0012</td>
184 <td>メーカー名0012</td>
185 <td align="right">20</td>
186 <td align="right">1000</td>
187 <td align="right">20000</td>
188 </tr>
189 <tr>
190 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox13" value="checkbox" onClick="checkItem(this)" /></td>
191 <td align="center">13</td>
192 <td>製品名0005</td>
193 <td>製品番号0013</td>
194 <td>メーカー名0013</td>
195 <td align="right">20</td>
196 <td align="right">1000</td>
197 <td align="right">20000</td>
198 </tr>
199 <tr class="tdEven">
200 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox14" value="checkbox" onClick="checkItem(this)" /></td>
201 <td align="center">14</td>
202 <td>製品名0005</td>
203 <td>製品番号0014</td>
204 <td>メーカー名0014</td>
205 <td align="right">20</td>
206 <td align="right">1000</td>
207 <td align="right">20000</td>
208 </tr>
209 <tr>
210 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox15" value="checkbox" onClick="checkItem(this)"/></td>
211 <td align="center">15</td>
212 <td>製品名0005</td>
213 <td>製品番号0015</td>
214 <td>メーカー名0015</td>
215 <td align="right">20</td>
216 <td align="right">1000</td>
217 <td align="right">20000</td>
218 </tr>
219 </table>
220 <div id="checkall" style="margin-left:5px"><input type="checkbox" name="chkSelectAll" id="chkSelectAll" onClick="SelectAllItem('checkbox')" /> 全てチェック</div>
221</BODY>
222</HTML>
223
2<HTML>
3<HEAD>
4<TITLE> checkAllItem </TITLE>
5<META NAME="Generator" CONTENT="EditPlus">
6<META NAME="Author" CONTENT="">
7<META NAME="Keywords" CONTENT="">
8<META NAME="Description" CONTENT="">
9<script language="javascript" type="text/javascript">
10function checkItem()
11{
12 var names = new Array(15);
13 names[0] = document.getElementById('checkbox1');
14 names[1] = document.getElementById('checkbox2');
15 names[2] = document.getElementById('checkbox3');
16 names[3] = document.getElementById('checkbox4');
17 names[4] = document.getElementById('checkbox5');
18 names[5] = document.getElementById('checkbox6');
19 names[6] = document.getElementById('checkbox7');
20 names[7] = document.getElementById('checkbox8');
21 names[8] = document.getElementById('checkbox9');
22 names[9] = document.getElementById('checkbox10');
23 names[10] = document.getElementById('checkbox11');
24 names[11] = document.getElementById('checkbox12');
25 names[12] = document.getElementById('checkbox13');
26 names[13] = document.getElementById('checkbox14');
27 names[14] = document.getElementById('checkbox15');
28
29 var id = document.getElementById('chkSelectAll');
30 var a=15;
31 for(var i=0;i<15;i++)
32 {
33 if(!names[i].checked)
34 {
35 id.checked = false;
36 a=a-1;
37 }
38 }
39 if(a==15){
40 id.checked = true;
41 }
42}
43
44function SelectAllItem(itemName)
45{
46
47 var aa = document.getElementsByName(itemName);
48 var id = document.getElementById('chkSelectAll');
49 for (var i=0; i<aa.length; i++)
50 {
51 aa[i].checked = id.checked;
52 }
53}
54</script>
55</HEAD>
56
57<BODY>
58 <table width="97%" border="1">
59 <tr>
60 <th width="4%" class="JobStatLabel" scope="col"> </th>
61 <th width="3%" class="JobStatLabel" scope="col">No.</th>
62 <th width="23%" class="JobStatLabel" scope="col">製品名</th>
63 <th width="15%" class="JobStatLabel" scope="col">製品番号</th>
64 <th width="19%" class="JobStatLabel" scope="col">メーカー名</th>
65 <th width="8%" class="JobStatLabel" scope="col">数量</th>
66 <th width="8%" class="JobStatLabel" scope="col">単価</th>
67 <th width="18%" class="JobStatLabel" scope="col">金額</th>
68 </tr>
69 <tr>
70 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox1" onClick="checkItem(this)" /></td>
71 <td align="center">1</td>
72 <td>製品名0001</td>
73 <td>製品番号0001</td>
74 <td>メーカー名0001</td>
75 <td align="right">20</td>
76 <td align="right">1000</td>
77 <td align="right">20000</td>
78 </tr>
79 <tr class="tdEven">
80 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox2" onClick="checkItem(this)" /></td>
81 <td align="center">2</td>
82 <td >製品名0002</td>
83 <td >製品番号0002</td>
84 <td >メーカー名0002</td>
85 <td align="right" >30</td>
86 <td align="right" >1000</td>
87 <td align="right" >30000</td>
88 </tr>
89 <tr>
90 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox3" value="checkbox" onClick="checkItem(this)" /></td>
91 <td align="center">3</td>
92 <td>製品名0003</td>
93 <td>製品番号0003</td>
94 <td>メーカー名0003</td>
95 <td align="right">20</td>
96 <td align="right">1000</td>
97 <td align="right">20000</td>
98 </tr>
99 <tr class="tdEven">
100 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox4" value="checkbox" onClick="checkItem(this)" /></td>
101 <td height="16" align="center">4</td>
102 <td >製品名0004</td>
103 <td >製品番号0004</td>
104 <td >メーカー名0004</td>
105 <td align="right" >30</td>
106 <td align="right" >1000</td>
107 <td align="right" >30000</td>
108 </tr>
109 <tr>
110 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox5" value="checkbox" onClick="checkItem(this)" /></td>
111 <td align="center">5</td>
112 <td>製品名0005</td>
113 <td>製品番号0005</td>
114 <td>メーカー名0005</td>
115 <td align="right">20</td>
116 <td align="right">1000</td>
117 <td align="right">20000</td>
118 </tr>
119 <tr class="tdEven">
120 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox6" value="checkbox" onClick="checkItem(this)" /></td>
121 <td align="center">6</td>
122 <td>製品名0005</td>
123 <td>製品番号0006</td>
124 <td>メーカー名0006</td>
125 <td align="right">20</td>
126 <td align="right">1000</td>
127 <td align="right">20000</td>
128 </tr>
129 <tr>
130 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox7" value="checkbox" onClick="checkItem(this)"/></td>
131 <td align="center">7</td>
132 <td>製品名0005</td>
133 <td>製品番号0007</td>
134 <td>メーカー名0007</td>
135 <td align="right">20</td>
136 <td align="right">1000</td>
137 <td align="right">20000</td>
138 </tr>
139 <tr class="tdEven">
140 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox8" value="checkbox" onClick="checkItem(this)" /></td>
141 <td align="center">8</td>
142 <td>製品名0005</td>
143 <td>製品番号0008</td>
144 <td>メーカー名0008</td>
145 <td align="right">20</td>
146 <td align="right">1000</td>
147 <td align="right">20000</td>
148 </tr>
149 <tr>
150 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox9" value="checkbox" onClick="checkItem(this)" /></td>
151 <td align="center">9</td>
152 <td>製品名0005</td>
153 <td>製品番号0009</td>
154 <td>メーカー名0009</td>
155 <td align="right">20</td>
156 <td align="right">1000</td>
157 <td align="right">20000</td>
158 </tr>
159 <tr class="tdEven">
160 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox10" value="checkbox" onClick="checkItem(this)" /></td>
161 <td align="center">10</td>
162 <td>製品名0005</td>
163 <td>製品番号0010</td>
164 <td>メーカー名0010</td>
165 <td align="right">20</td>
166 <td align="right">1000</td>
167 <td align="right">20000</td>
168 </tr>
169 <tr>
170 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox11" onClick="checkItem(this)" /></td>
171 <td align="center">11</td>
172 <td>製品名0005</td>
173 <td>製品番号0011</td>
174 <td>メーカー名0011</td>
175 <td align="right">20</td>
176 <td align="right">1000</td>
177 <td align="right">20000</td>
178 </tr>
179 <tr class="tdEven">
180 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox12" value="checkbox" onClick="checkItem(this)"/></td>
181 <td align="center">12</td>
182 <td>製品名0005</td>
183 <td>製品番号0012</td>
184 <td>メーカー名0012</td>
185 <td align="right">20</td>
186 <td align="right">1000</td>
187 <td align="right">20000</td>
188 </tr>
189 <tr>
190 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox13" value="checkbox" onClick="checkItem(this)" /></td>
191 <td align="center">13</td>
192 <td>製品名0005</td>
193 <td>製品番号0013</td>
194 <td>メーカー名0013</td>
195 <td align="right">20</td>
196 <td align="right">1000</td>
197 <td align="right">20000</td>
198 </tr>
199 <tr class="tdEven">
200 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox14" value="checkbox" onClick="checkItem(this)" /></td>
201 <td align="center">14</td>
202 <td>製品名0005</td>
203 <td>製品番号0014</td>
204 <td>メーカー名0014</td>
205 <td align="right">20</td>
206 <td align="right">1000</td>
207 <td align="right">20000</td>
208 </tr>
209 <tr>
210 <td align="center" class="JobStatLabel"><input type="checkbox" name="checkbox" id="checkbox15" value="checkbox" onClick="checkItem(this)"/></td>
211 <td align="center">15</td>
212 <td>製品名0005</td>
213 <td>製品番号0015</td>
214 <td>メーカー名0015</td>
215 <td align="right">20</td>
216 <td align="right">1000</td>
217 <td align="right">20000</td>
218 </tr>
219 </table>
220 <div id="checkall" style="margin-left:5px"><input type="checkbox" name="chkSelectAll" id="chkSelectAll" onClick="SelectAllItem('checkbox')" /> 全てチェック</div>
221</BODY>
222</HTML>
223