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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JavaScript中this详解
Sep 01 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Vue中props的使用详解
Jun 15 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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 Error与Logging函数的深入理解
2013/06/03 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
一封普通求职者的求职信
2013/11/20 职场文书
护理专业自我鉴定
2014/01/30 职场文书
婚礼主持结束词
2014/03/13 职场文书
端午节活动总结报告
2015/02/11 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python