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'}); 
}); 
}); 