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 图片上传预览-兼容标准
Jun 01 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php ajax 静态分页过程形式
2011/09/02 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Python通用函数实现数组计算的方法
2019/06/13 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python实现图片添加文字
2019/11/26 Python
浅析Django中关于session的使用
2019/12/30 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
医院保洁服务方案
2014/06/11 职场文书
村班子对照检查材料
2014/08/18 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
推销搭讪开场白
2015/05/28 职场文书
2015年国培研修感言
2015/08/01 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
一起来学习Python的元组和列表
2022/03/13 Python