方便实用的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 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JS交换变量的方法
Jan 21 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
解决layer弹出层自适应页面大小的问题
Sep 16 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
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
python编程线性回归代码示例
2017/12/07 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
专业销售业务员求职信
2013/11/18 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
颁奖典礼主持词
2014/03/25 职场文书
建议书的格式
2014/05/12 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
介绍信的写法
2015/01/31 职场文书
财政局长个人总结
2015/03/04 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android