html+css+js实现复选框全选与反选

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html+css+js实现复选框全选与反选相关的知识,希望对你有一定的参考价值。

 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>&nbsp;</td>
59                     <td>&nbsp;</td>
60                 </tr>
61                 
62                 <tr>
63                     <td><input type="checkbox" id="cb1" value="1" />1</td>
64                     <td>我是傻逼1</td>
65                     <td>&nbsp;</td>
66                     <td>&nbsp;</td>
67                 </tr>
68                 
69                 <tr>
70                     <td><input type="checkbox" id="cb2" value="2" />2</td>
71                     <td>我是傻逼2</td>
72                     <td>&nbsp;</td>
73                     <td>&nbsp;</td>
74                 </tr>
75                 
76                 <tr>
77                     <td><input type="checkbox" id="cb3" value="3" />3</td>
78                     <td>我是傻逼3</td>
79                     <td>&nbsp;</td>
80                     <td>&nbsp;</td>
81                 </tr>
82                 
83                 <tr>
84                     <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
85                     <td>反选案例</td>
86                     <td>&nbsp;</td>
87                     <td>&nbsp;</td>
88                 </tr>
89             </table>
90         </form>
91     </body>
92 </html>

 

以上是关于html+css+js实现复选框全选与反选的主要内容,如果未能解决你的问题,请参考以下文章

js实现CkeckBox全选与反选

el-table多级复选框全选与反选

vue中复选框全选与反选

elementUI+JS实现全选与反选

jQuery简单实现全选与反选

Jquery 复选框全选与反选点击执行一次然后失效解决方案