<!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>

html+css+js实现复选框全选与反选的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  3. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  4. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  6. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  7. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  8. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  9. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

随机推荐

  1. 关于android:configChanges的属性

    一般在AndroidManifest.xml文件中都没有使用到android:configChanges="keyboardHidden|orientation"配置,当然还是很有 ...

  2. HDU 1996

    Problem Description n个盘子的汉诺塔问题的最少移动次数是2^n-1,即在移动过程中会产生2^n个系列.由于发生错移产生的系列就增加了,这种错误是放错了柱子,并不会把大盘放到小盘上, ...

  3. 应用SecureCRT（发送接收文件）

    使用 SecureCRT 和 cz. sz,可以从 Linux 服务器上下载/上传文件. Linux 上要安装 lszrz 包 (1)编译安装root 账号登陆后,依次执行以下命令 cd /tmp w ...

  4. BZOJ 1008 越狱

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  5. [转]Windows Azure上安装SharePoint 2013

    基于Windows Azure 安装SharePoint 2013 前段时间写的基于Windows Azure安装SharePoint系列,由于Azure的体验账号过期了,所以不得不暂停.今天有幸参加 ...

  6. 1027. Colors in Mars (20) PAT

    题目:http://pat.zju.edu.cn/contests/pat-a-practise/1027 简单题,考察十进制数和n进制数的转换和输出格式的控制. People in Mars rep ...

  7. 【HDOJ】2267 How Many People Can Survive

    BFS. #include <iostream> #include <cstdio> #include <cstring> #include <queue&g ...

  8. JDK安装配置与升级

    一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1. 首先查看系统自带的JDK版本: [root@linux ~]# ...

  9. Linux 多线程调试（内存占用、死循环、CPU占用率高……）

    文章出处:http://www.cnblogs.com/cy568searchx/archive/2013/10/28/3391790.html 你的软件在某个时刻停止服务,CPU占用达到100%+, ...

  10. 动态规划(斜率优化)：BZOJ 3675 [Apio2014]序列分割

    Description 小H最近迷上了一个分割序列的游戏.在这个游戏里,小H需要将一个长度为N的非负整数序列分割成k+l个非空的子序列.为了得到k+l个子序列, 小H将重复进行七次以下的步骤: 1．小 ...