方便实用的jQuery checkbox复选框全选功能简单实例


Posted in Javascript onOctober 09, 2013
// 主复选框
<input type="checkbox" id="ck" name="ckAll">// 子复选框项
<input type="checkbox" id="ck1" name="ckItm">
<input type="checkbox" id="ck2" name="ckItm">
<input type="checkbox" id="ck3" name="ckItm">
var $ckAll = $("input[name='ckAll']");
var $ckItm = $("input[name='ckItm']");
var len = $ckItm.length;
$ckAll.click(function() {
// 获取$ckAll当前选中状态,如果选中,其他子复选框则选中,反之则取消
    $ckItm.prop('checked',this.checked);
});
$ckItm.click(function() {
    // 给b绑定判断事件
    var b=$ckItm.filter(":checked").length==len;// 当所选的子复选框个数等于总个数,主复选框则会被选中
    // 通过三元运算判断
    var flag=$ckAll.prop("checked",b?true:false);
});
Javascript 相关文章推荐
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
ES6数组的扩展详解
Apr 25 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
自己编写的类似JS的trim方法
Oct 09 #Javascript
jquery()函数的三种语法介绍
Oct 09 #Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 #Javascript
jquery右下角弹出提示框示例代码
Oct 08 #Javascript
让复选框只能选择一项的方法
Oct 08 #Javascript
js中的push和join方法使用介绍
Oct 08 #Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
利用python3随机生成中文字符的实现方法
2017/11/24 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python实现在线翻译
2020/06/18 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
优秀中职教师事迹材料
2014/08/26 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL