1 <html>
2 <title>復選框全選與反選</title>
3 <style type="text/css">
4 fieldset{width:500px; font-size:12px; color:#666666;}
5 ul{list-style:none outside; list-style-image:none; padding:0; margin:0;}
6 ul li{ display:block; line-height:20px; height:20px; margin-top:10px; }
7 </style>
8 <script type="text/javascript">
9 function check_all(){
10 var objCheck=document.getElementsByTagName("input");
11 for(var i=0; i<objCheck.length-2;i++){
12 objCheck[i].checked=true;
13 }
14 }
15 function check_resver(){
16 var objCheck=document.getElementsByTagName("input");
17 for(var i=0; i<objCheck.length-2;i++){
18 if(objCheck[i].checked==true){
19 objCheck[i].checked=false;
20 }
21 else{
22 objCheck[i].checked=true;
23 }
24 }
25 }
26 </script>
27
28 <body>
29 <form id="form_checkbox">
30 <fieldset>
31 <legend>復選框全選與反選</legend>
32 <ul>
33 <li>
34 <label>
35 <input type="checkbox" name="checkbox" value="checkbox" tabindex="1" />
36 </label>
37 <span>有些心事</span>
38 </li>
39 <li>
40 <label>
41 <input type="checkbox" name="checkbox" value="checkbox" tabindex="2" />
42 </label>
43 <span>有些事情</span>
44 </li>
45 <li>
46 <label>
47 <input type="checkbox" name="checkbox" value="checkbox" tabindex="3" />
48 </label>
49 <span>有點心煩</span>
50 </li>
51 <li>
52 <label>
53 <input type="checkbox" name="checkbox" value="checkbox" tabindex="4" />
54 </label>
55 <span>有點不安</span>
56 </li>
57 <li>
58 <label>
59 <input type="checkbox" name="checkbox" value="checkbox" tabindex="5" />
60 </label>
61 <span>有種感覺</span>
62 </li>
63 <li>
64 <label>
65 <input type="checkbox" name="checkbox" value="checkbox" tabindex="6" />
66 </label>
67 <span>不知所措</span>
68 </li>
69 <li>
70 <label>
71 <input type="button" value="全 選" onclick="check_all();" />
72 <input type="button" value="反 選" onclick="check_resver();" />
73 </label>
74 </li>
75 </ul>
76 </fieldset>
77 </form>
78 </body>
79 </html>