首页 / 脚本样式 / JavaScript / jquery复选框CHECKBOX全选、反选

使用方法:我们先把下面的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"}）;
}）;
}）;