方便实用的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 Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
JavaScript 数组详解
Oct 10 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JavaScript Canvas实现验证码
Aug 02 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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将session信息存储到数据库的类实例
2015/03/04 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python协程用法实例分析
2015/06/04 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python中取绝对值简单方法总结
2020/07/24 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
同事打架检讨书
2014/02/04 职场文书
销售会计岗位职责
2014/03/15 职场文书
员工安全生产责任书
2014/07/22 职场文书
见习报告的格式
2014/10/31 职场文书
酒店温馨提示语
2015/07/14 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
SQL Server内存机制浅探
2022/04/06 SQL Server