方便实用的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的分页控件(C#)
Jan 06 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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 ftp文件上传函数(基础版)
2010/06/03 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
bootstrap table小案例
2016/10/21 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
浅析Python中signal包的使用
2015/11/13 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python缩进长度是否统一
2020/08/02 Python
利用python爬取有道词典的方法
2020/12/08 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
超市采购员岗位职责
2014/02/01 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
法律进机关实施方案
2014/03/12 职场文书
党员承诺书内容
2014/03/26 职场文书
中学生操行评语大全
2014/04/24 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
Python实现位图分割的效果
2021/11/20 Python