jQuery实现一个全选复选框联动效果
- 类似邮件列表里的复选框
- 要求双向联动
☛ 【实现】：
<body>
<div>
<input type="checkbox" name="checkAll">全选
</div>
<br>
<div class="cbList">
<input type="checkbox" name="cb">
<input type="checkbox" name="cb">
<input type="checkbox" name="cb">
</div>
</body>
<script>
var $ckAll = $('input[name=checkAll]'),
$cb = $('input[name=cb]'),
$cbList = $('.cbList');
$ckAll.on('click', function() {
var flag = $ckAll.prop('checked');
if (flag) {
$cb.prop('checked', true);
} else {
$cb.prop('checked', false);
}
});
$cbList.on('click', function() {
var flag = true;
$.each($cb, function(index, item) {
if (!$(item).prop('checked')) {
flag = false;
}
});
if (flag) {
$ckAll.prop('checked', true);
} else {
$ckAll.prop('checked', false);
}
});
</script>
☛ 【补充】：
(1) 判断是否选中的两种写法：
var flag = $ckAll.prop('checked');
var flag = $ckAll.is(':checked');
(2) 注意 attr 和 prop
attr：作为一个节点属性，初始化之后不会改变
prop：会随着事件而改变
.attr( "checked" ): checked
.prop( "checked" ): true
.is( ":checked" ): true
jQuery实现一个全选复选框联动效果的更多相关文章
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- WPF: 实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
- WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- java freemarker导出word时添加或勾选复选框
最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...
- ExtJS中，将Grid表头中的全选复选框取消复选
今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...
- iOS开发-UITableView单选多选/复选实现1
TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...
- MVC 下拉框联动效果(单选)
下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...
随机推荐
- MySQL索引实现
摘自:http://blog.codinglabs.org/articles/theory-of-mysql-index.html 在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现 ...
- YanYan Self Introduction
My Website: http://finehappy.com/
- Linux 下配置多机实时同步
没钱的时候,用此方案做网站内容的负载均衡.异地备份,经济实惠又方便(仅针对网站文件做实时同步,如果数据库,则考虑mysql的多主架构) 一.机器配置及机房IP A机,位于杭州,IP: 115.33.2 ...
- 原创：整理编辑jQuery全部思维导图【附下载地址】
主图 全部图已经打包:下载地址 2. 3. 4. 5. 6. 附上一点简单说明 Dom对象和jquer对象之间的转化 如何将一个jquery对象转换为DOM对象? test是一个span元素 var ...
- 重点关注之Filter的使用(性能计数和错误处理)
Web API中的filter与MVC中的filter非常类似,最主要的不同是,MVC中的filter放在命名空间System.Web.Mvc下,而Web API中的filter则放在命名空间Syst ...
- 利用电话管理器TelephonyManager获取网络和SIM卡信息
import java.util.ArrayList;import java.util.HashMap;import java.util.Map; import android.os.Bundle;i ...
- Resume Hook SSDT
在HookSSDT中 通过在第4部通过索引将NtOpenProcess 换成 Base[索引] = FakeNtOpenProcess; so 在阻止时应该在ntoskrnl.exe 找到真正的Op ...
- Activity界面切换动画特效。
效果图: 结构图: 测试代码: 布局: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearL ...
- submit回车提交影响
$(".bInput").bind('keydown',function(event){//回车提交手动标签 if(event.keyCode==13){ ...
- HDU 4035 Maze 概率dp,树形dp 难度:2
http://acm.hdu.edu.cn/showproblem.php?pid=4035 求步数期望,设E[i]为在编号为i的节点时还需要走的步数,father为dfs树中该节点的父节点,son为 ...