<!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. truncate 命令删除恢复

    truncate命令可以一次性删除当前表中所有记录并且不留任何日志,同时这个表的ID就自动初化从1开始,今天我就来给大家尝试一个利用truncate清除记录之后恢复过程. 实际线上的场景比较复杂,当时 ...

  2. python中归并排序

    # coding=UTF-8 #!/usr/bin/python import sys def merge(nums, first, middle, last): "merge" ...

  3. UnixODBC

    UnixODBC下载安装地址:http://www.unixodbc.org/ DOWNLOAD Distribution Format unixODBC is currently availible ...

  4. Web工程软件升级之数据库升级(二)

    升级前检查 1. 用户是否存在 awk -F: '{if($1 == "xxx") print $1}' /ect/passwd 用户名 awk -F: '{if($1 == &q ...

  5. 45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧，技巧和最佳实践)

    As you know, JavaScript is the number one programming language in the world, the language of the web ...

  6. Delphi 指针大全（光看不练是学不会的）

    大家都认为,C语言之所以强大,以及其自由性,很大部分体现在其灵活的指针运用上.因此,说指针是C语言的灵魂,一点都不为过.同时,这种说法也让很多人产生误解,似乎只有C语言的指针才能算指针.Basic不支 ...

  7. scheme corotuine

    In cooperative multithreading, a thread must yield control manually; it will not be preemptively swi ...

  8. 【Linux】鸟哥的Linux私房菜基础学习篇整理（三）

    1. gzip [-cdtv#] filename:压缩.参数:-c:将压缩的数据输出到屏幕上,可通过数据重定向进行处理:-d:解压缩的参数:-t:可以用来检验一个压缩文件的一致性,查看文件有无错误: ...

  9. CF-164C. Machine Programming(最小费用最大流)

    题意: 给你n个任务,k个机器,n个任务的起始时间,持续时间,完成任务的获利 每个机器可以完成任何一项任务,但是同一时刻只能完成一项任务,一旦某台机器在完成某项任务时,直到任务结束,这台机器都不能去做 ...

  10. -_-#【jQuery插件】textSlider 文本滚动

    jQuery.textSlider.js ;(function($) { $.fn.textSlider = function(settings) { settings = jQuery.extend ...