jquery復(fù)選框CHECKBOX全選、反選
更新時間:2008年08月30日 20:41:53 作者:
在JQUERY官方站點(diǎn)看到了另一個方法.更加簡單,給大家分享出來:
官方給的函數(shù)名為CheckboxGroup;顧名思義就是選取一組CHECKBOX.最新版是在6月18號發(fā)布的:
使用方法:我們先把下面的JS保存為有個文件,到時候調(diào)用,淡然你也可以直接寫在頁面內(nèi),推薦使用前者,方便重用:
(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'});
});
});
復(fù)制代碼 代碼如下:
(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);
復(fù)制代碼 代碼如下:
<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});
});
});
或者下面這種方式:
復(fù)制代碼 代碼如下:
<?php
$(function() {
$("#checkall").click(function() {
$('#checkall').checkgroup({groupName:'group'});
});
});
您可能感興趣的文章:
- jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- 用JQuery實(shí)現(xiàn)全選與取消的兩種簡單方法
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery一鍵控制checkbox全選、反選或全不選
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
- jquery實(shí)現(xiàn)全選功能
相關(guān)文章
Jquery 監(jiān)視按鍵,按下回車鍵觸發(fā)某方法的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery監(jiān)視按鍵,當(dāng)按下回車鍵時觸發(fā)事件的一個例子,有需要的朋友可以參考下2014-05-05解決Jquery load()加載GB2312頁面時出現(xiàn)亂碼的兩種方案
jquery的字符集是utf-8,load方法加載完GB2312編碼靜態(tài)頁面后,出現(xiàn)中文亂碼,可以通過將兩個頁面的編碼格式轉(zhuǎn)換成utf8的方法來解決,具體如下,感興趣的朋友可以參考下2013-09-09HTML+jQuery實(shí)現(xiàn)簡單的登錄頁面
這篇文章主要介紹了用三種方法實(shí)現(xiàn)簡單的登錄頁面的制作:純HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感興趣的同學(xué)可以跟隨小編一起學(xué)習(xí)一下2021-12-12使用jQuery的load方法設(shè)計動態(tài)加載及解決被加載頁面js失效問題
這篇文章主要介紹了使用jQuery的load方法設(shè)計動態(tài)加載及解決被加載頁面js失效問題,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03jQuery ajax在GBK編碼下表單提交終極解決方案(非二次編碼方法)
當(dāng)jquery ajax在utf-8編碼下(頁面utf-8,接收utf-8),無任何問題??梢哉ost、get,處理頁面直接獲取正確的內(nèi)容。2010-10-10jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾
這篇文章主要介紹了jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾的相關(guān)資料,需非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2016-11-11