税程财经网
您的当前位置:首页jshtmlcss实现复选框全选与反选

jshtmlcss实现复选框全选与反选

来源:税程财经网


本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下

<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> </td>
 <td> </td>
 </tr>
 
 <tr>
 <td><input type="checkbox" id="cb1" value="1" />1</td>
 <td>我是傻逼1</td>
 <td> </td>
 <td> </td>
 </tr>
 
 <tr>
 <td><input type="checkbox" id="cb2" value="2" />2</td>
 <td>我是傻逼2</td>
 <td> </td>
 <td> </td>
 </tr>
 
 <tr>
 <td><input type="checkbox" id="cb3" value="3" />3</td>
 <td>我是傻逼3</td>
 <td> </td>
 <td> </td>
 </tr>
 
 <tr>
 <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
 <td>反选案例</td>
 <td> </td>
 <td> </td>
 </tr>
 </table>
 </form>
 </body>
</html>
显示全文