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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
     <head>
         <title>html+css+js实现复选框全选与反选</title>
         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <meta name="keywords" content="js,笔试题目" />
         <style type="text/css">
             table,tr,td
             {
                 border:1px solid red;
             }
         </style>
         <script type="text/javascript">
             function quanxuan()
             {
                 for(var i=1;i<=3;i++)
                 {
                     var cbox_id="cb"+i;
                     var cbox=document.getElementById(cbox_id);
                     //alert(cbox.value);
                     if(document.getElementById("cb_quanxuan").checked)
                         cbox.checked=true;
                     else
                         cbox.checked=false;
                 }
             }
             function fanxuan()
             {
                 for(var i=1;i<=3;i++)
                 {
                     var cbox_id="cb"+i;
                     var cbox=document.getElementById(cbox_id);
                     if(document.getElementById("cb_fanxuan").checked)
                     {//选中反选框
                         if(cbox.checked)
                             cbox.checked=false;
                         else
                             cbox.checked=true;
                     }
                     else
                     {
                         if(cbox.checked)
                             cbox.checked=false;
                         else
                             cbox.checked=true;
                     }
                 }
             }
         </script>

     </head>
     <body>
         <form id="form1">
             <table>
                 <tr>
                     <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
                     <td>复选框全选案例</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                 </tr>

                 <tr>
                     <td><input type="checkbox" id="cb1" value="1" />1</td>
                     <td>我是傻逼1</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                 </tr>

                 <tr>
                     <td><input type="checkbox" id="cb2" value="2" />2</td>
                     <td>我是傻逼2</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                 </tr>

                 <tr>
                     <td><input type="checkbox" id="cb3" value="3" />3</td>
                     <td>我是傻逼3</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                 </tr>

                 <tr>
                     <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
                     <td>反选案例</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                 </tr>
             </table>
         </form>
     </body>
 </html>