jquery復選框CHECKBOX全選、反選
更新時間:2008年08月30日 20:41:53 作者:
在JQUERY官方站點看到了另一個方法.更加簡單,給大家分享出來:
官方給的函數(shù)名為CheckboxGroup;顧名思義就是選取一組CHECKBOX.最新版是在6月18號發(fā)布的:
使用方法:我們先把下面的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'});
});
});
復制代碼 代碼如下:
(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'});
});
});
您可能感興趣的文章:
相關文章
Jquery 監(jiān)視按鍵,按下回車鍵觸發(fā)某方法的實現(xiàn)代碼
這篇文章主要介紹了jquery監(jiān)視按鍵,當按下回車鍵時觸發(fā)事件的一個例子,有需要的朋友可以參考下2014-05-05
解決Jquery load()加載GB2312頁面時出現(xiàn)亂碼的兩種方案
jquery的字符集是utf-8,load方法加載完GB2312編碼靜態(tài)頁面后,出現(xiàn)中文亂碼,可以通過將兩個頁面的編碼格式轉換成utf8的方法來解決,具體如下,感興趣的朋友可以參考下2013-09-09
使用jQuery的load方法設計動態(tài)加載及解決被加載頁面js失效問題
這篇文章主要介紹了使用jQuery的load方法設計動態(tài)加載及解決被加載頁面js失效問題,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03
jQuery ajax在GBK編碼下表單提交終極解決方案(非二次編碼方法)
當jquery ajax在utf-8編碼下(頁面utf-8,接收utf-8),無任何問題。可以正常post、get,處理頁面直接獲取正確的內容。2010-10-10
jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾
這篇文章主要介紹了jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾的相關資料,需非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2016-11-11

