方便实用的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 相关文章推荐
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
php mysql数据库操作分页类
2008/06/04 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
Redis构建分布式锁
2017/03/28 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python怎么判断模块安装完成
2020/06/19 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
计算机专业学生求职信分享
2013/12/15 职场文书
考试退步检讨书
2014/01/15 职场文书
高中语文教学反思
2014/01/16 职场文书
初一科学教学反思
2014/01/27 职场文书
企业申诉管理制度
2014/01/30 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
Python采集股票数据并制作可视化柱状图
2022/04/04 Python