<html>

 <head>

 <meta charset="utf-8">

 <title>Checkbox的练习</title>

 <style type="text/css">

 *{margin:0px;padding:0px;}

 table{width:100%;text-align:center;}

 </style>

 <script src="jquery.js"></script>

 <script language="javascript">

     $(function(){

         //给全选的复选框添加事件

         $("#all").click(function(){

             // this 全选的复选框

             var userids=this.checked;

             //获取name=box的复选框 遍历输出复选框

             $("input[name=box]").each(function(){

                 this.checked=userids;

             });

         });

         //给name=box的复选框绑定单击事件

         $("input[name=box]").click(function(){

             //获取选中复选框长度

             var length=$("input[name=box]:checked").length;

             //未选中的长度

             var len=$("input[name=box]").length;

             if(length==len){

                 $("#all").get(0).checked=true;

             }else{

                 $("#all").get(0).checked=false;

             }

         });

     });

 </script>

 </head>

 <body>

     <div>

     <form action="" method="post">

         <table border="1px">

             <tr>

                 <th>

                 <input type="Checkbox" id="all"/>全选

                 </th>

                 <th>用户编号</th>

                 <th>用户账号</th>

                 <th>用户姓名</th>

                 <th>用户性别</th>

                 <th>用户年龄</th>

                 <th>家庭住址</th>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box"  value="10010"/></td>

                 <td>10010</td>

                 <td>root</td>

                 <td>小别</td>

                 <td>男</td>

                 <td>22</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box"  value="10011"/></td>

                 <td>10011</td>

                 <td>root</td>

                 <td>小李</td>

                 <td>男</td>

                 <td>23</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box"  value="10012"/></td>

                 <td>10012</td>

                 <td>root</td>

                 <td>小赵</td>

                 <td>男</td>

                 <td>21</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box"  value="10013" /></td>

                 <td>10013</td>

                 <td>root</td>

                 <td>小周</td>

                 <td>男</td>

                 <td>25</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box"  value="10014" /></td>

                 <td>10014</td>

                 <td>root</td>

                 <td>小吴</td>

                 <td>男</td>

                 <td>20</td>

                 <td>河南</td>

             </tr>

         </table>

     </form>

     </div>

 </body>

 </html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Checkbox的练习</title>

 <style type="text/css">

 *{margin:0px;padding:0px;}

 table{width:100%;text-align:center;}

 </style>

 <script language="javascript">

     function checkAll(obj){

         //alert(obj.checked);

         //获取name=box的复选框

         var userids=document.getElementsByName("box");

         //alert(userids.length);

         for(var i=0;i<userids.length;i++){

             userids[i].checked=obj.checked;

         }

     }

     function selectAll(){

         //获取name=box的复选框

         var userids=document.getElementsByName("box");

         var count=0;

         //遍历所有的复选框

         for(var i=0;i<userids.length;i++){

             if(userids[i].checked){

                 count++;

             }

         }

         //选中复选框的个数==获取复选框的个数

         if(count==userids.length){

         //设置id为all复选框选中

             document.getElementById("all").checked=true;

         }else{

         //设置id为all复选框不选中

             document.getElementById("all").checked=false;

         }

     }

 </script>

 </head>

 <body>

     <div>

     <form action="" method="post">

         <table border="1px">

             <tr>

                 <th>

                 <input type="Checkbox" onclick="checkAll(this)" id="all"/>全选

                 </th>

                 <th>用户编号</th>

                 <th>用户账号</th>

                 <th>用户姓名</th>

                 <th>用户性别</th>

                 <th>用户年龄</th>

                 <th>家庭住址</th>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box" onclick="selectAll()" value="10010"/></td>

                 <td>10010</td>

                 <td>root</td>

                 <td>小别</td>

                 <td>男</td>

                 <td>22</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box" onclick="selectAll()" value="10011"/></td>

                 <td>10011</td>

                 <td>root</td>

                 <td>小李</td>

                 <td>男</td>

                 <td>23</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box" onclick="selectAll()" value="10012"/></td>

                 <td>10012</td>

                 <td>root</td>

                 <td>小赵</td>

                 <td>男</td>

                 <td>21</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box" onclick="selectAll()" value="10013" /></td>

                 <td>10013</td>

                 <td>root</td>

                 <td>小周</td>

                 <td>男</td>

                 <td>25</td>

                 <td>河南</td>

             </tr>

             <tr>

                 <td><input type="Checkbox" name="box" onclick="selectAll()" value="10014" /></td>

                 <td>10014</td>

                 <td>root</td>

                 <td>小吴</td>

                 <td>男</td>

                 <td>20</td>

                 <td>河南</td>

             </tr>

         </table>

     </form>

     </div>

 </body>

 </html>

jQuery实现Checkbox中项目开发全选全不选的使用的更多相关文章

  1. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  2. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  5. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  6. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  7. 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享  在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...

  8. 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享    在开始讲解之前,我们先来看一下什 ...

  9. （转）使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享

    原文地址:http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码 ...

随机推荐

  1. 在Linux中的文本模式下手动安装 Parallels Tools

    1.启动虚拟机. 2.当看到提示 X Server 无法启动的消息时,使用 Ctrl+Option+F1(Ctrl+Alt+F1)切换到另一个虚拟控制台并输入登录信息. 3 从“虚拟机”菜单中选择“安 ...

  2. CommandArgument传多个参数

    CommandArgument='<%#Eval("id")+","+Eval("interName") %>'

  3. [Linux]CentOS下安装和使用tmux

    前天随意点开博客园,看到了一篇关于tmux的文章 Tmux - Linux从业者必备利器,特意还点进去看了.毕竟Linux对于做游戏服务端开发的我来说,太熟悉不过了.不过我就粗略地看了一眼,就关掉了. ...

  4. STL之map应用 +hash表（51nod 1095）

    题目:Anigram单词 题意:给出词典,再给出一些单词,求单词的Anigram数量. 思路:先将字串转换成哈希表,然后再用map链接. hash表构造方法汇总:http://www.cnblogs. ...

  5. 编译器问题：运行maven，报错-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.

    1.新建环境变量M2_HOME 2.指向你的maven安装目录 例如 :M2_HOME=D:\Apps\apache-maven-3.3.9 3.进入Myeclipse进行修改,Window-> ...

  6. Java中this与super的区别【6】

    若有不正之处,请多多谅解并欢迎批评指正,不甚感激.请尊重作者劳动成果: 本文原创作者:pipi-changing本文原创出处:http://www.cnblogs.com/pipi-changing/ ...

  7. 将src非空的属性注入到des中

    package lizikj.bigwheel.common.vo.merchandise.util; import java.lang.reflect.Field; import lizikj.bi ...

  8. javascript的原型和继承（1）

    原型与继承是javascript中基础,重要而相对比较晦涩难解的内容.在图灵的网上看到一篇翻译过的文章,有参考了一些知名博客.我自己总结了几篇.通过这次的总结,感觉自己对原型和继承的认识又增加了很多, ...

  9. ubuntu Screen 的比较详细的命令

    Linux Screen Commands For Developers 转自:http://fosshelp.blogspot.com/2014/02/linux-screen-commands-f ...

  10. IOS封装一个微信聊天的输入工具

    1.实现微信的输入工具 实现了大部分功能,各模块实现的很清晰,有利于更好的二次开发(适合自己的需求),我自己总结出来的, 可以更快的让你实现输入工具,不需要扩展的也可以很方便的使用这个输入工具. 1) ...