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 ...
随机推荐
- Testin云測公布首份国内应用质量报告:半数APP平均启动时间不合格
Testin云測公布首份国内应用质量报告:半数APP平均启动时间不合格 2014/10/23 · Testin · 实验室报告 日前,Testin云測旗下质量管家Master通过随机取样1605款国内 ...
- vi 命令 使用方法
一.Unix编辑器概述 编辑器是使用计算机的重要工具之中的一个,在各种操作系统中,编辑器都是不可缺少的部件.Unix及其类似的ix 操作系统系列中,为方便各种用户在各个不同的环境中使用,提 ...
- Mac下PHP环境的搭建
Mac下PHP环境的搭建 目录 Mac下PHP环境的搭建(基于XAMPP) phpmyadmin Mac下PHP环境的搭建(基于XAMPP) 下载XAMPP的Mac版 启动Apache Web Ser ...
- 深入理解MYSQL的MDL元数据锁
1 前言 2 MDL锁与实现 3 MDL锁的性能与并发改进 4 MDL锁的诊断 前言 好久没更新,主要是因为Inside君最近沉迷于一部动画片——<新葫芦娃兄弟>.终于抽得闲,完成了本篇关 ...
- String当中的高效函数（优化）
1. indexOf()函数是一个执行速度非常快的函数,可以用其与subString()实现高效的字符串分割,比内置的要高效. 2. charAt()方法也是高效率的函数,可以用其实现高效的start ...
- 算法设计 - LCS 最长公共子序列&&最长公共子串 &&LIS 最长递增子序列
出处 http://segmentfault.com/blog/exploring/ 本章讲解:1. LCS(最长公共子序列)O(n^2)的时间复杂度,O(n^2)的空间复杂度:2. 与之类似但不同的 ...
- 16g u盘变 成1g u盘 解决方案，使用驱动器中的光盘之前需要将其格式化
1\ 计算机----管理------磁盘管理 有一个黑色区域是未分配的 2\ 1)进入cmd 命令行窗口2)输入 diskpart,并回车.弹出系统提示,选是即可.3)输入 list disk,并回 ...
- C++与正态分布
正态分布(Normal distribution)又名高斯分布(Gaussiandistribution).若随机变量X服从一个数学期望为μ.方差为σ^2的高斯分布,记为N(μ,σ^2).其概率密度函 ...
- 开发工具 之 PowerDesigner 应用积累
1.在默认情况下,code与name是联动,修改了name中的数据. 解决方法:设置菜单栏选择"Tools→General Options→Dialog" 中的 "Na ...
- c++11 Chrono时间库
c++11 Chrono时间库 http://en.cppreference.com/mwiki/index.php?title=Special%3ASearch&search=chrono ...