你的位置:首页 > Java教程

[Java教程]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           else24             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             else38               cbox.checked=true;39           }40           else41           {42             if(cbox.checked)43               cbox.checked=false;44             else45               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>