<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/javascript实现全选全不选的更多相关文章

  1. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  2. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  3. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  4. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  5. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  6. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  7. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  8. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  9. 在jquery中，全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. html css一些记录

    1.忽略将页面中的数字识别为电话号码 <meta content="telephone=no" name="format-detection" /> ...

  2. 搭建DHCP服务器以及DHCP中继服务器

    一.DHCP服务器   1.首先配置DHCP服务器的IP地址(DHCP服务器网卡桥接在VMnet1)   .配置好IP后重启DHCP服务 3.安装DHCP服务器,在这里我用的是YUM安装的(关于YUM ...

  3. Cannot fetch index base URL https://pypi.python.org/simple/

    这个就是相源的问题,正常安装你的根目录下会有这个pip.log文件,如下 root@liu:~# ll .pip/ total 16 drwxr-xr-x 2 root root 4096 Sep 1 ...

  4. 【转】HTTP状态码（HTTP Status Code）

    原文链接:http://www.chaoji.com/features/httpstatus.aspx 一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - ...

  5. QEMU命令创建KVM Guest(bridge桥接)

    1. Check QEMU version [root@pqsfc018 ~]# /usr/bin/qemu-system-x86_64 -version QEMU emulator version ...

  6. linux用户、组管理及权限（一）

    一.用户管理 1.为什么需要用户 1)计算机及网络资源的合理分配  2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用户分类 用户的角色是通过UID(用户ID)来 ...

  7. 如何利用java得到当前的时间和前一天的时间

    1.得到当前的时间 Calendar   cal   =   Calendar.getInstance(); String time=formatter.format(cal.getTime()); ...

  8. step by step 之餐饮管理系统三

    1.说明 表名的长度最长为18个字符 茶色的字段为主键或联合主键 浅黄色的字段为索引 浅灰底色的字段为临时表中比正式表多出的字段 数据库系统:Sqlserver2008 脚本工具:使用CodeGene ...

  9. python 静态方法，类方法 ，类的继承

    转自:  http://cowboy.1988.blog.163.com/blog/static/75105798201091141521583/ 1.关于定义类的一些奇特之处  今天在Python中 ...

  10. 【6_100】Same Tree

    Same Tree Total Accepted: 97481 Total Submissions: 230752 Difficulty: Easy Given two binary trees, w ...