方便实用的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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 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入门经历和学习过程分享
2014/04/11 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
多广告投放代码 推荐
2006/11/13 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Vue.use源码分析
2017/04/22 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
vue如何判断dom的class
2018/04/26 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
利用Python如何生成随机密码
2016/04/20 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
超级搞笑检讨书
2014/01/15 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书