表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 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. 关于jsb中js与c++的相互调用

    1.js调用c++函数 在c++中声明函数,名为functionCpp,通过spidermonkey中jsapi的JS_DefineFunction绑定一个js函数,名为functionJS,此函数名 ...

  2. php防止ddos,dns,集群攻击的实现代码

    <?php /* vim: set expandtab tabstop=4 shiftwidth=4: */ // +-------------------------------------- ...

  3. Python xml 解析百度糯米信息

    先利用爬虫利用百度糯米提供的api来采集北京当天的团购信息,保存为numi.html import xml.etree.ElementTree as ET import os class Nuomi( ...

  4. 【python，logging】python中的logging模块

    本文章转自kenby的博客,比较全面易懂,转来留作以后使用. http://kenby.iteye.com/blog/1162698 一.从一个使用场景开始 import logging # 创建一个 ...

  5. VS2013 添加文件头部注释模板

    在看视频的时候发现,视频中每次新建一个类文件 都会自动生成一串 头部的注释:

  6. springmvc(2)--参数绑定

    一.以实例来看springmvc各种参数绑定方式   先定义个dto类: public class RestInDto implements Serializable { private static ...

  7. Windows 7 无线网络故障

    朋友打电话来问为何他的PC不能连接到家里的无线网络,而手机等其他设备都可以?相互交谈之中,我问如下几个问题: 是否可以搜索到其他无线网络? 答:是.(想确实无线网卡工作是否正常) 新的手机是否可以连接 ...

  8. 剑指Offer20 栈的压入弹出序列是否正确

    /************************************************************************* > File Name: 20_IsPopO ...

  9. codeforces 675B B. Restoring Painting(暴力枚举)

    题目链接: B. Restoring Painting time limit per test 1 second memory limit per test 256 megabytes input s ...

  10. An instance 0x172b8600 of class UITableView was deallocated while key value

    从带有tableview并且使用Mj下拉刷新的视图调用popViewControllerAnimated的时候,控制台打印这个: An instance 0x15d7aa00 of class UIT ...