表单处理时经常会有全选的功能,但是这个功能往往会被忽视一个细节,就是逐个选中 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. Unity3d截图保存到Android相册的实现

    Unity3d截图保存到Android相册的实现-----------------------------ultrasoon 季风原创--------------------------------- ...

  2. GCC 编译选项(转)

    转:http://www.cnblogs.com/xmphoenix/archive/2011/03/21/1989944.html gcc提供了大量的警告选项,对代码中可能存在的问题提出警 告,通常 ...

  3. NSNotificationCenter 使用姿势详解

    来源:JamesYu 链接:http://www.jianshu.com/p/a4d519e4e0d5 最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用 ...

  4. xUtils的介绍

    鉴于大家的热情,我写了一篇Android 最火框架XUtils之注解机制详解<-点击查看 xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal ...

  5. ubuntu 12.10安装VIM

    使用命令:sudo apt-get install vim vim-gtk 可能安装时出错,可用下面更新系统,再执行上面的安装命令. 更新:sudo apt-get update

  6. Android 珍藏(二)

    一.如何控制Android  LED等?(设置NotificationManager的一些参数) 代码如下: final int ID_LED=19871103; NotificationManage ...

  7. IOS缓存之NSCache缓存

    NSCache:专门做缓存的类 NSCache简介:NSCache是苹果官方提供的缓存类,用法与NSMutableDictionary的用法很相似,在AFNetworking和SDWebImage中, ...

  8. rpm build error: invalid predicate

    rpm build error error message:/usr/lib/rpm/find-debuginfo.sh /usr/src/redhat/BUILD/RPMS find: invali ...

  9. System.Data.OracleClient requires Oracle client software version 8.1.7 or greater

    It is a security issue, so to fix it simply do the following: Go to the Oracle folder. 1- Right Clic ...

  10. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...