表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 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. iOS开发——UI篇Swift篇&UIProgressView

    UIProgressView override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleString // Do ...

  2. Linux内核文档翻译之Squashfs文件系统

    转载:http://blog.csdn.net/gqb_driver/article/details/12946629 对于使用openwrt的嵌入式系统来说,因为硬件绝大多数采用Flash,因此一般 ...

  3. 如何制作gif动画，丰富自己的博客？

    不久前在博客园上看到有个哥们发表了一篇博客,其中使用了大量的动态的gif动画,感觉这种方法对于丰富博客内容非常有帮助,然后在网上搜索了一些关于制作gif动画的资料.我的方法不一定好,在这里仅作为抛砖引 ...

  4. WEB免费打印控件推荐

    在WEB系统中,打印的确是个烦人的问题. 要么自己开发打印控件,如果项目时间紧,肯定来不及. 要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1.2W之间,这就麻烦了. 前段时间有机 ...

  5. EntityFramework优缺点(转)

    Entity Framework  是微软推荐出.NET平台ORM开发组件, 现在已放源代码.  以下我们来讨论一下优缺点和一些问题, 以下简称EF.  有兴趣可查询官网的Entity Framewo ...

  6. Aggressive cows 二分不仅仅是查找

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7083   Accepted: 3522 Description Farme ...

  7. [Java] 使用 Spring 2 Portlet MVC 框架构建 Portlet 应用

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-spring2-portal/ Spring 除了支持传统的基于 Servlet 的 Web 开发之 ...

  8. Photoshop笔记一

    Photoshop界面认识 Photoshop界面认识 区域划分 工作 (快捷键) 功能键 常用键: 新建图层 剪切并原位粘贴 建立图层组合 合并图层 课程练习讲解 区域划分

  9. 整合iis+tomcat

    目的: 将 Tomcat与 IIS整合在一起,共用 80端口.让 iis可以解析 *.asp. *.aspx. *.jsp. servlet和 *.do文件: 第一步:准备工作. 在你的 Tomcat ...

  10. Linux 网卡驱动设备程序设计（1）

    一.网卡驱动架构分析 1. Linux 网络子系统 #系统调用接口层 为应用程序提供访问网络子系统的统一方法. #协议无关层 提供通用的方法来使用传输层协议. #协议栈的实现 实现具体的网络协议 #设 ...