当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery复选框CHECKBOX全选、反选

Javascript
javascript实现的鼠标悬停时动态翻滚的导航条
通过隐藏option实现select的联动效果
jquery 输入框数字限制插件
文字来回上下移动或跳动的代码
JS旋转的彩色文字轮转特效
不一样的文字闪烁 轮番闪烁
Javascript 解疑
jQuery 白痴级入门教程
Jquery在IE7下无法使用 $.ajax解决方法
javascript 日期常用的方法
ASP中进行HTML数据及JS数据编码函数
JS 中document.URL 和 windows.location.href 的区别
跨域表单提交状态的变相判断代码
JS解析XML的实现代码
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Javascript 定时器调用传递参数的方法
把html页面的部分内容保存成新的html文件的jquery代码
XHTML下,JS浮动代码失效的问题
两个select之间option的互相添加操作(jquery实现)
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

Javascript 中的 jquery复选框CHECKBOX全选、反选


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 515 ::
收藏到网摘: n/a

在JQUERY官方站点看到了另一个方法.更加简单,给大家分享出来: 官方给的函数名为CheckboxGroup;顾名思义就是选取一组CHECKBOX.最新版是在6月18号发布的: 使用方法:我们先把下面的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'});
});
});