jshtmlcss实现复选框全选与反选

来源：懂视网责编：小OO 时间：2020-11-27 20:25:34

jshtmlcss实现复选框全选与反选

<。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>。<。>。i<。=3。

推荐度：

点击下载本文 文档为doc格式

导读<。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>。<。>。i<。=3。

本文实例为大家分享了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>

jshtmlcss实现复选框全选与反选

推荐度：

点击下载本文 文档为doc格式

标签：全选 html css

热门焦点

jshtmlcss实现复选框全选与反选

jshtmlcss实现复选框全选与反选

jshtmlcss实现复选框全选与反选

最新推荐

猜你喜欢

热门推荐