<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. 手把手教你用axis1.4搭建webservice(转)

    1.先下载axis jar包:axis-bin-1_4.zip.下载地址: http://ws.Apache.org/axis/. 当然这个包其实是不全面的,像activation.jar之类的,完全 ...

  2. LeetCode OJ 150. Evaluate Reverse Polish Notation

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  3. python学习之路-day5-模块

    本节内容: 模块详解 1.模块定义 2.os&sys模块 3.time&datetime模块 4.random模块 5.shutil模块 6.shelve模块 7.configpars ...

  4. Android（Xamarin）之旅（三）

    前面两篇说到了Xamarin的安装和一些简单的控件,今天来说说一些对话框和提示信息,以及简单的布局元素. 一.对话框和提示信息 一.对话框 我们首先从简单的对话框开始. 1.普通对话框 在androi ...

  5. bugly使用

    导入: 1.Bugly.framework 2.Security.framework 3.SystemConfiguration.framework 4.libc++.1.dylib 5.libz.1 ...

  6. Exception loading sessions from persistent storage 这个问题的解决

    现在经常在做一个项目时重启时会报: 严重: Exception loading sessions from persistent storage的问题. 这个问题的原因是tomcat的session持 ...

  7. linux 清理内存命令 查看内存命令

    查看内存: 我们可以用free命令查看内存信息: free -g total used free shared buffers cachedMem: 15   15    0     0       ...

  8. freeCodeCamp:Check for Palindromes

    如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). 注意你需要去掉字符串多 ...

  9. hd2066一个人的旅行

    Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰 ...

  10. 【数位dp】bzoj2089 不要62

    http://www.cnblogs.com/xiaohongmao/p/3473599.html #include<cstdio> using namespace std; int n, ...