jquery复选框CHECKBOX全选、反选


Posted in Javascript onAugust 30, 2008

使用方法:我们先把下面的JS保存为有个文件,到时候调用,淡然你也可以直接写在页面内,推荐使用前者,方便重用:

(function($){ 
$.fn.checkgroup = function(options){ 
//merge settings 
settings=$.extend({ 
groupSelector:null, 
groupName:'group_name', 
enabledOnly:false 
},options || {}); var ctrl_box=this; 

//allow a group selector override option 
var grp_slctr = (settings.groupSelector==null) ? 'input[name='+settings.groupName+']' : settings.groupSelector; 
//grab only enabled checkboxes if required 
if(settings.enabledOnly) 
{ 
grp_slctr += ':enabled'; 
} 
//attach click event to the "check all" checkbox(s) 
ctrl_box.click(function(e){ 
chk_val=(e.target.checked); 
$(grp_slctr).attr('checked',chk_val); 
//if there are other "select all" boxes, sync them 
ctrl_box.attr('checked',chk_val); 
}); 
//attach click event to checkboxes in the "group" 
$(grp_slctr).click(function(){ 
if(!this.checked) 
{ 
ctrl_box.attr('checked',false); 
} 
else 
{ 
//if # of chkbxes is equal to # of chkbxes that are checked 
if($(grp_slctr).size()==$(grp_slctr+':checked').size()){ 
ctrl_box.attr('checked','checked'); 
} 
} 
}); 
//make this function chainable within jquery 
return this; 
}; 
})(jQuery);
主要看下面的使用方法:
<input type='checkbox' class='checkall'>checkall<br> 
<input class='groupclass' name='group' type='checkbox'>chk1<br> 
<input class='groupclass' name='group' type='checkbox'>chk2<br> 
<input class='groupclass' name='group' type='checkbox'>chk3<br> 
<input class='groupclass' name='group' type='checkbox'>chk4<br> 
<input type='checkbox' class='checkall' id="checkall"> 
<?php 
$(function() { 
$("#checkall").click(function() { 
$('.checkall').checkgroup({groupSelector:'.groupclass',enabledOnly:true}); 
}); 
});

或者下面这种方式:
<?php 
$(function() { 
$("#checkall").click(function() { 
$('#checkall').checkgroup({groupName:'group'}); 
}); 
});

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 #Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 #Javascript
JQUERY THICKBOX弹出层插件
Aug 30 #Javascript
IE php关于强制下载文件的代码
Aug 23 #Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 #Javascript
Javascript 篱式条件判断
Aug 22 #Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php实现插入排序
2015/03/29 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
简单实现php上传文件功能
2017/09/21 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
JavaScript 异步调用
2017/10/25 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
最新创业融资计划书
2014/01/19 职场文书
护士求职信范文
2014/05/24 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
深入理解python多线程编程
2021/04/18 Python
python中的getter与setter你了解吗
2022/03/24 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers
基于redis+lua进行限流的方法
2022/07/23 Redis
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python