全选Checkbox实现代码

<!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

function 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

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

function SelectAllItem(itemName)
45

{
46

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

<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

posted @ 2006-09-25 15:36 阿一(杨正祎) 阅读(557) 评论(0) 收藏举报

刷新页面返回顶部