表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 checkBox 直至全选时，经常会忘记修改全选 checkBox 的状态，某知名互联网公司的网盘就会出现这样的问题，问题如图：

所以，需要给 checkBox 的点击事件做一下处理：点击时遍历一下除了全选的单选框之外的所有单选框，如果有未选中的，则全选不选中，如果全部都选中了，则修改全选框的状态，以下是我写的一个简单的例子：

运行结果：

以下就是例子的全部代码：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=GBK"/>

    <style>

        ul,li{

            list-style:none;

        }

    </style>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" charset="utf-8">

        function clickAll(){

            $(".checkOne").prop("checked",$(".checkAll").prop("checked"));

        }

        function clickOne(){

            var allChecked = true;

            $(".checkOne").each(function(){

                if($(this).prop("checked") == false){

                    allChecked = false;

                };

            });

            if(allChecked){

                $(".checkAll").prop("checked",true);

            } else {

                $(".checkAll").prop("checked",false);

            }

        }

    </script>

</head>

<body>

<ul>

    <li><input type="checkBox" class="checkAll" onclick="clickAll()" id="all"/><label for="all">爱好(全选)</label></li>

    <br/>

    <li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck1"/><label for="ck1">足球</label></li>

    <li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck2"/><label for="ck2">网球</label></li>

    <li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck3"/><label for="ck3">篮球</label></li>

</ul>

</body>

</html>

一起学习，有问题欢迎拍砖吐槽……

jQuery checkBox 全选的例子的更多相关文章

  1. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  2. jQuery checkbox 全选

    jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false 高版本中jQuery 提供prop ...

  3. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  4. jquery checkbox 全选、取消全选

    $("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...

  5. jquery checkbox全选 获取值

    <style> table { line-height:35px; }</style> <div align="left" style="m ...

  6. jquery checkbox 全选反选代码只能执行一遍，第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

  7. jQuery checkbox全选 和全部取消

    1.chkAll选中,全部chk选中  ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...

  8. JQuery checkbox全选多次点击后无效解决方法

    1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...

  9. 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别

    $("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...

随机推荐

  1. GXPT（一）——UI设计

    通过长时间的积淀.TGB再次開始GXPT模式,JAVA版..NET版两条线同一时候进行. 纯面向对象的底层架构的搭建:easyUI+MVC的界面设计:工作流的再次雄起.云平台的构想:Confluenc ...

  2. VC6.0常见编译错误提示

    原文:http://c.biancheng.net/cpp/html/746.html 1) error C2001: newline in constant 编号:C2001 直译:在常量中出现了换 ...

  3. GNU的ar，ranlib和nm

    转:http://blog.csdn.net/yuntongsf/article/details/6284517 RANLIB 的作用: CC = CC=/usr/local/ndk/toolchai ...

  4. InAction-根据LBS数据手机用户移动轨迹

    看了以后学了不少通信运营商关于用户数据记录的知识啊. 本来想从网上找真实数据集的,但是网上的数据不合这个DEMO的场景要求,于是用作者提供的python脚本生成一定数据量的数据来实践(当然,这些数据结 ...

  5. 解决Intellij IDEA 通过archetype创建Maven项目缓慢的问题

    1.由于默认情况下,根据archetype创建maven项目会从网络下载catalog文件,导致创建maven项目缓慢 Searching for remote catalog: http://rep ...

  6. L - Fabled Rooks（中途相遇法和贪心）

    Problem F: Fabled Rooks We would like to place n rooks, 1 ≤ n ≤ 5000, on a n×n board subject to the ...

  7. 1.7.4 Query Syntax and Parsing

    1. 查询语法和解析 这部分主要说明了如何指定被使用的查询解析器.同样描述了主查询解析器的支持的语法和功能.同时还描述了在特定环境下使用的其他查询解析器.这里有一些普通查询解析器都能使用的参数,将会在 ...

  8. iOS- SQLite3的基本使用

    iOS- 简单说说iOS移动客户端SQLite3的基本使用  1.为什么要使用SQLite3?   •大量数据需要存储 •管理数据,存储数据   SQLite是一种关系型数据库(也是目前移动客户端的主 ...

  9. JAVA xml 流方式读取。数据挖掘大文件预处理。

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  10. uboot在s3c2440上的移植（2）

    一.移植环境 主  机:VMWare--Fedora 9 开发板:Mini2440--64MB Nand,Kernel:2.6.30.4 编译器:arm-linux-gcc-4.3.2.tgz u-b ...