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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
vue生命周期实例小结
Aug 15 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php检测文本的编码
2015/07/26 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
js中less常用的方法小结
2017/08/09 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python读写csv文件实例代码
2019/07/05 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
工程质量承诺书
2014/03/27 职场文书
授权委托书样本
2014/04/03 职场文书
应届毕业生自荐书
2014/06/18 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript