ホームページ >ウェブフロントエンド >jsチュートリアル >jquery チェックボックス チェックボックス すべて選択、反転 select_jquery

jquery チェックボックス チェックボックス すべて選択、反転 select_jquery

WBOY
WBOYオリジナル
2016-05-16 19:01:341158ブラウズ

使用方法: まず次の JS をファイルとして保存し、後で呼び出します。再利用しやすいように前者を使用することをお勧めします。 >
コードをコピー

コードは次のとおりです:(function($){ $.fn.checkgroup = function(options){
//設定をマージします
settings=$.extend({
groupSelector:null,
groupName:'group_name',
enabledOnly:false
},options || {}) ;

var ctrl_box=this;


// グループ セレクター オーバーライド オプションを許可します
var grp_slctr = (settings.groupSelector==null) ? settings.groupName ']' : settings.groupSelector;

//必要に応じて有効なチェックボックスのみを取得します
if(settings.enabledOnly)
{
grp_slctr = ':enabled'; >}

//「すべてチェック」チェックボックスにクリック イベントを添付します
ctrl_box.click(function(e){
chk_val=(e.target.checked);
$(grp_slctr). attr('checked',chk_val);
//他に「すべて選択」ボックスがある場合は、それらを同期します
ctrl_box.attr('checked',chk_val); );
/ /「グループ」のチェックボックスにクリック イベントをアタッチします。
$(grp_slctr).click(function(){
if(!this.checked)
{
ctrl_box. attr('checked', false);
}
else
{
//chkbx の数がチェックされた chkbx の数と等しい場合
if($(grp_slctr).size ()==$( grp_slctr ':checked').size()){
ctrl_box.attr('checked','checked')
}
}
}); >//この関数を jquery 内でチェーン可能にします
return this>})(jQuery);

主に次の使用方法を確認します。 🎜>

コードをコピー


コードは次のとおりです:


checkall< ;br>
<入力クラス ='グループクラス' 名前='グループ' タイプ='チェックボックス'>chk1

<入力クラス='グループクラス' 名前='グループ' タイプ='チェックボックス'>chk2
chk3
chk4
$(function() { $("#checkall") .click(function() {
$('.checkall').checkgroup({groupSelector:'.groupclass',enabledOnly:true});
});
});


または次の方法:





コードをコピーします


コードは次のとおりです。

$(function() {
$("#checkall").click(function() {
$( '#checkall').checkgroup({グループ名:'グループ '}) });
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。