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 ...
随机推荐
- 20 Free Open Source Web Media Player Apps
free Media Players (Free MP3, Video, and Music Player ...) are cool because they let web developers ...
- BIOS 深入学习 转
http://blog.csdn.net/lightseed/article/category/547391
- careercup-高等难度 18.7
18.7 给定一组单词,编写一个程序,找出其中的最长单词,且该单词由这组单词中的其他单词组合而成. 解法: 原题 给定字符串,以及一个字典,判断字符串是否能够拆分为字段中的单词.例如,字段为{hell ...
- 重置kafka的offset
如果你在使用Kafka来分发消息,在数据处理的过程中可能会出现处理程序出异常或者是其它的错误,会造成数据丢失或不一致.这个时候你也许会想要通过kafka把数据从新处理一遍,我们知道kafka默认会在磁 ...
- Joy of Programming: Understanding Bit-fields in C
转:http://www.linuxforu.com/2012/01/joy-of-programming-understanding-bit-fields-c/ By S.G. Ganesh on ...
- A+B Coming
Problem Description Many classmates said to me that A+B is must needs.If you can’t AC this problem, ...
- 使用HttpURLConnection和AsyncTask从网络缓存图片
1.创建NetCacheUtils中创建downloadBitmap(String url)方法 private Bitmap downloadBitmap(String url){ HttpURLC ...
- uiview 的transitionWithView 方法使用
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [UIView transitionWithView:_imageV ...
- Android消息推送完美方案
转自:http://bbs.hiapk.com/thread-4652657-1-1.html 推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原 ...
- iOS篇之有沙盒缓存
内存指的就是主板上的存储部件,是CPU直接与之沟通,并用其存储数据的部件,存放当前正在使用的(即执行中)的数据和程序,它的物理实质就是一组或多组具备数据输入输出和数据存储功能的集成电路,内存只用于暂时 ...