jQuery checkBox 全选的例子
表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 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 全选的例子的更多相关文章
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- jQuery checkbox 全选
jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false 高版本中jQuery 提供prop ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- jquery checkbox 全选、取消全选
$("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...
- jquery checkbox全选 获取值
<style> table { line-height:35px; }</style> <div align="left" style="m ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- JQuery checkbox全选多次点击后无效解决方法
1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...
- 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别
$("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...
随机推荐
- Android创建桌面快捷方式
在桌面上创建特定界面的快捷入口,icon和title根据请求参数命名.在网上收集的一些相关资 料,在使用intent发送广播的时候,一些型号的收集会有问题,如魅族MX,红米,以及华为,使用setCla ...
- D2 前端技术论坛总结（下）
此篇文章不接上篇了,下午4场我就不一一介绍了,主要总结下 D2 整场下来都讲了些什么. 整场下来,就3个关键词:nodejs,多终端,工程化 nodejs 从杭js到d2,大会上提到最多的词汇 ...
- j疑难杂症：java.lang.VerifyError: class org.hibernate.type.WrappedMaterializedBlobType overrides final method getReturnedClass.()Ljava/lang/Class;
问题: java.lang.VerifyError: class org.hibernate.type.WrappedMaterializedBlobType overrides final meth ...
- LeetCode57 Insert Interval
题目: Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if nec ...
- 1.7.4.2 Local Parameters in Queries--局部参数
1. 局部参数 Local parameters是在solr请求中指定一个查询参数.Local parameters提供了一个方式以添加元数据到某个参数类型中,如查询字符串(在solr文档中,Loca ...
- 1.5 理解Analyzers,Tokenizers,Filters--目录
这部分介绍了solr如何分解和处理文本数据的,它包含一下主题: 1.5.1 Analyzers,Tokenizers,Filters概述:主要介绍Analyzers,Tokenizers,Filter ...
- Eclipse中配置Tomcat碰到Server Tomcat v6.0 Server at localhost failed to start问题
控制台打印异常如下: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/juli/logg ...
- ios-uitableviewcell展开
#import <UIKit/UIKit.h> @interface ZSDHelpCell : UITableViewCell @property (weak, nonatomic) I ...
- DataGridView 多线程更新 数据 解决卡顿问题
使用多线程更新DataGridView,防止页面卡顿和卡死的问题 private delegate void UpdateDataGridView(DataTable dt); private voi ...
- WinDBG快速定位异常位置
在WinDBG中通过搜索内存中保存的CONTEXT结构来定位发生的异常信息,再通过WinDBG命令.cxr显示对应的调用堆栈信息. .foreach ( place { s-[1]d 0 L?FF ...