方便实用的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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
js实现扫雷小程序的示例代码
Sep 27 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python实现统计代码行的方法分析
2017/07/12 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python线性插值解析
2020/07/05 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python实现KNN近邻算法
2020/12/30 Python
合伙经营协议书范本
2014/04/18 职场文书
个人工作表现评价材料
2014/09/21 职场文书
股权转让协议书
2014/12/07 职场文书
学生保证书
2015/01/16 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
高二英语教学反思
2016/03/03 职场文书
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle