1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>html+css+js实现复选框全选与反选</title>
5 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
6 <meta name="keywords" content="js,笔试题目" />
7 <style type="text/css">
8 table,tr,td
9 {
10 border:1px solid red;
11 }
12 </style>
13 <script type="text/javascript">
14 function quanxuan()
15 {
16 for(var i=1;i<=3;i++)
17 {
18 var cbox_id="cb"+i;
19 var cbox=document.getElementById(cbox_id);
20 //alert(cbox.value);
21 if(document.getElementById("cb_quanxuan").checked)
22 cbox.checked=true;
23 else
24 cbox.checked=false;;
25 }
26 }
27 function fanxuan()
28 {
29 for(var i=1;i<=3;i++)
30 {
31 var cbox_id="cb"+i;
32 var cbox=document.getElementById(cbox_id);
33 if(document.getElementById("cb_fanxuan").checked)
34 {//选中反选框
35 if(cbox.checked)
36 cbox.checked=false;
37 else
38 cbox.checked=true;
39 }
40 else
41 {
42 if(cbox.checked)
43 cbox.checked=false;
44 else
45 cbox.checked=true;
46 }
47 }
48 }
49 </script>
50
51 </head>
52 <body>
53 <form id="form1">
54 <table>
55 <tr>
56 <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
57 <td>复选框全选案例</td>
58 <td> </td>
59 <td> </td>
60 </tr>
61
62 <tr>
63 <td><input type="checkbox" id="cb1" value="1" />1</td>
64 <td>我是傻逼1</td>
65 <td> </td>
66 <td> </td>
67 </tr>
68
69 <tr>
70 <td><input type="checkbox" id="cb2" value="2" />2</td>
71 <td>我是傻逼2</td>
72 <td> </td>
73 <td> </td>
74 </tr>
75
76 <tr>
77 <td><input type="checkbox" id="cb3" value="3" />3</td>
78 <td>我是傻逼3</td>
79 <td> </td>
80 <td> </td>
81 </tr>
82
83 <tr>
84 <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
85 <td>反选案例</td>
86 <td> </td>
87 <td> </td>
88 </tr>
89 </table>
90 </form>
91 </body>
92 </html>
时间： 2024-10-24 21:49:01