<!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. 那些年被我坑过的Python——玄而又玄（第六章 面向对象编程基础）

    面向对象编程: 面向对象顾名思义,就是把组织代码的粒度从函数级别抽象到对象级别,对象是通过类来生成的,类可以想象为模板或进本框架而对象是在原有模板或框架的基础上增加详细信息的实体,类,有分类.聚类的含 ...

  2. iOS播放短的音效

    在IOS中,有的时候需要播放很简短的声音文件,比如系统声音等,我们需要使用到下面的方式来播放声音: // 一.引入头文件 #import <AudioToolbox/AudioToolbox.h ...

  3. test知识

    内部测试SIT ——system integration testcase 用户测试UAT——user acceptance test SIT是集成测试UAT是验收测试从时间上看,UAT要在SIT后面 ...

  4. Highways poj 2485

    Description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has no public h ...

  5. C#程序设计基础——类、对象、方法

    类与对象 类 类是一种构造,通过使用该构造,用户可以将其他类型的变量.方法和事件组合在一起,从而创建自定义类型.类就像一个蓝图,它定义类型的数据和行为. 对象 定义类之后,便可通过将类加载到内存中来使 ...

  6. 除了创建时指定窗口位置之外，还有3种移动窗口位置的办法（移动的同时往往可以改变窗口大小）（SetWindowPos最有用，它有许多标志位）

    首先,在创立窗口对象的时候,CreateWindowEx就可以指定窗口的位置.除此之外,还有三种方法可以改变窗口的位置: procedure TWinControl.CreateWindowHandl ...

  7. js eval()函数 接收一个字符串，做为js代码来执行。 如： s='var d="kaka"'; 或者s=‘function (code){return code }’;

    eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值, ...

  8. 「Poetize9」升降梯口

    3056: 升降梯口 Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 43  Solved: 42[Submit][Status] Description ...

  9. 教您怎么从spring 官网下载参考文档

    假如您使用spring,那么本经验可能帮助到您. 假如您使用spring的过程中,需要查询一些文档,那么本经验可能帮助到您. 假如您对下载spring的文档有疑惑,那么本经验可能帮助到您. 教您怎么从 ...

  10. （转载）mysql查询今天、昨天、7天、近30天、本月、上一月数据

    (转载)http://blog.163.com/dreamman_yx/blog/static/26526894201053115622827/ 查询 今天 select * from 表名 wher ...