方便实用的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 相关文章推荐
eval的两组性能测试数据
Aug 17 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
js实现图片3D轮播效果
Sep 21 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生成数组再传给js的方法
2014/08/07 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
jquery radio 操作代码
2011/03/16 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
Django添加feeds功能的示例
2018/08/07 Python
python之super的使用小结
2018/08/13 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
财务整改报告范文
2014/11/05 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
首次购房证明
2015/06/19 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
Nginx报404错误的详细解决方法
2022/07/23 Servers