方便实用的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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2016寒假假期总结
2015/10/10 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers