方便实用的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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
javascript实现拼图游戏
Jan 29 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对象类型判断
2008/08/27 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python下载网络小说实例代码
2018/02/03 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python类的实例化问题解决
2019/08/31 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
.net工程师笔试题
2012/06/09 面试题
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2015年远程教育工作总结
2015/05/20 职场文书