<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. IOS 周几转化数字

    NSString *weekStr = @"周二"; NSInteger  weekday = [self passday:weekStr]; -(NSInteger)passda ...

  2. IE、FF、Safari、OP不同浏览器兼容报告

    IE.FF.Safari.OP不同浏览器兼容报告 1         浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos Fi ...

  3. Ubuntu 12.04(32位)安装Oracle 11g(32位)

    安装过程(主要过程就直接copy别人的教程了)及问题: 1.将系统更新到最新: sudo apt-get updatesudo apt-get dist-upgrade 2. 如果使用的Ubuntu不 ...

  4. 关于GP的理解

    连续式中,CMMI有5个GG:阶段式只有3个.多出来的2个GG,一个对应的是阶段4的量化,一个是阶段5的持续优化,确保了阶段式和连续式在范围上的一致性. GG就是讲各个过程中的共有元素抽取出来,形成的 ...

  5. Java垃圾回收小结

    一.如何确定某个对象是“垃圾”? 首先要搞清一个最基本的问题:如果确定某个对象是“垃圾”?既然垃圾收集器的任务是回收垃圾对象所占的空间供新的对象使用,那么垃圾收集器如何确定某个对象是“垃圾”?—即通过 ...

  6. zabbix监控tomcat

    服务端配置修改 编译zabbix的时候需要添加参数--enable-java --enable-java 修改zabbix_java配置文件 vim /usr/local/zabbix-2.4.6/s ...

  7. Cocos与Cocos2d-x协作教程——多分辨率适配

    http://www.cocoachina.com/bbs/read.php?tid-288123.html Cocos v2.1开始新增了一种新的多分辨率适配方案:流式布局. 这种布局相比Cocos ...

  8. Storm启动流程简介

    storm启动流程          storm是一个流行的开源的,分布式实时处理框架,关于storm的基本介绍可以参加这篇官方文档.大致的拓扑结构如图所示:        其中Nimbus是一个后台 ...

  9. c# 后台弹出对话框 和前台弹出新页面

    前台: window.showModalDialog("daoru.aspx", "NPOI_daoru_window", "status:false ...

  10. [ASE][Daily Scrum]11.19

    Sprint2已经开始了~今天晚上有课所以今天的plan比较少~ View Shilin Liu 能够看见其他玩家发射出来的子弹 能够看见其他玩家的子弹消失         Client Jiafan ...