<!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. PHP之验证码识别

    首先推荐几篇有关验证码识别的文章,觉得不错 php实现验证码的识别(初级篇) 关于bp神经网格识别验证码 一.思路 碰见一个验证码,如果我们想要识别它,我们需要的是做什么呢? 我们先观察几个验证码.. ...

  2. android:persistent属性

    application PhoneApp既没有被Broadcast唤醒,也没有被其他service调用,那么是android是通过什么方式来启动PhoneApp,所以就发现了属性android:per ...

  3. jQuery在on绑定事件时，使用Function.prototype.bind上下文，只能用off(event)解绑函数，否则可能导致事件叠加

    因为一个bind函数,未解绑成功导致事件叠加,搞了一下午. keyup事件绑定: this.$document.on('keyup', this.keyUp.bind(this)); 原解绑函数: t ...

  4. 在Linux下写一个线程池以及线程池的一些用法和注意点

    -->线程池介绍(大部分来自网络)  在这个部分,详细的介绍一下线程池的作用以及它的技术背景以及他提供的一些服务等.大部分内容来自我日常生活中在网络中学习到的一些概念性的东西. -->代码 ...

  5. 通过GetManifestResourceStream加载文件出现错误提示“null值”对于“stream”无效[转]

    本文解决了我的问题,收藏一下. 原文地址:http://blog.sina.com.cn/s/blog_a67799f601010atz.html 在做Mobile开发时,需要引入图片,用到了这个方法 ...

  6. Node.js流

    什么是流? 流是可以从一个源读取或写入数据到连续的目标对象.在Node.js,有四种类型的数据流. Readable - 其是用于读操作. Writable - 用在写操作. Duplex - 其可以 ...

  7. BZOJ 1492 货币兑换

    Description Input 第一行两个正整数\(N,S\),分别表示小Y 能预知的天数以及初始时拥有的钱数. 接下来\(N\)行,第\(K\)行三个实数\(A_{K},B_{K},Rate_{ ...

  8. unity3d中的http通信 二

    转载自 http://www.cnblogs.com/88999660/archive/2013/03/11/2954279.html 如果侵权,请及时通知我删除! using System; usi ...

  9. How to add alias on Mac(It's common for most system)

    Since these files are hidden you will have to do an ls -a to list them. If you don't have one you ca ...

  10. bzoj2427

    一开始读错题导致各种不会做,无奈其实是一道水题,缩点反向建图树形dp即可 type link=^point; point=record po:longint; next:link; end; ..] ...