方便实用的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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
Javascript验证方法大全
Sep 21 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
Vue 技巧之控制父类的 slot
Feb 24 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
accesskey 提交
2006/06/26 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js查找节点的方法小结
2015/01/13 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
市场营销战略计划书
2014/05/06 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年档案室工作总结
2014/12/01 职场文书
检讨书范文300字
2015/01/28 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
服务器间如何实现文件共享
2022/05/20 Servers
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android