<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推荐

    1.CUB LINUX Cub Linux 是一个最好的选择.他的前身来自著名的 Chromium OS , Cub Linux 能够运行在各种各样的笔记本上面.即便是早年的老机,亦或是现在的新机.从 ...

  2. 03-JAVA方法

    答:我发现这两个方法的返回类型以及参数类型不一样. package 汉诺塔问题; /**汉诺塔问题*作者:徐浩军 日期:16.10.16 天气:晴*/ public class TowersOfHan ...

  3. 韩服MU

    ※◆☆★☆◆※欢迎使用!!!如有问题或新功能需求请联系作者QQ:82850696*4*您使用的测试版已到期,如需继续使用,请联系作者 QQ : 82850696*0*2015-1-7 23:59:59 ...

  4. 数据库的char(n)

    Mysql中的char(n)或者varchar(n) 其中的n就是代表列,不代表字节! varchar(n)其中的n最多是65535 , 应该在创建表的同时,指定表的编码方式为latin1,因为lat ...

  5. C复数的四则运算

    #include<stdio.h> void judge(int True,int Fake) {     if (True == 0)     {         if (Fake == ...

  6. Java 第14章 字符串

    字符串 基本数据类型和引用数据类型作为方法参数 ,在传递时有什么不同之处. 答:基本数据类型按值传递,相当于复制了一份过去. 引用数据类型是指向引用 内存地址,两个地方 根据地址使用同一份数据,如被更 ...

  7. 5.18-5.22js调制样式

    这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个li都可跳动整个列表,所以是双for循环,第一个是控制点击事件,第二个是循环改变每个li的flot值.另外要改变每次点击后的点 ...

  8. ubuntu卸载java

    Try this command: java -version If 1.6* comes then try: sudo apt-get autoremove openjdk-6-jre If 1.7 ...

  9. SQL Server 利用锁提示优化Row_number()-程序员需知

    网站中一些老页面仍采用Row_number类似的开窗函数进行分页处理,此时如果遭遇挖坟帖的情形可能就需要漫长的等待且消耗巨大.这里给大家介绍根据Row_number()特性采用特定锁Hint提升查询速 ...

  10. SQLLDR记录数与文本记录数比较

    我们平时都用sqlldr进行将文本数据加载到数据库,但是有时候由于数据问题导致入库率不能达到100%,因此我们要检测是否存在不能入库的数据记录.以下shell脚本就是统计文本中记录数和数据库中记录数是 ...