チェックボックスの一括チェック（全選択）／一括解除（全解除）

jQuery2010年12月22日

親のチェックボックスを選択→子供のチェックボックスを一括チェック・一括解除するスクリプトを作成しましたのでご紹介いたします。

よく不動産のサイトでみかけるやつですね。Home'sとかYahoo不動産とかで路線を選択する時とかもこの機能を実装しています。色々なところで紹介されていますが、よくある一括チェック・一括解除機能に加え下記も実装しています。

子供をひとつずつチェック→全部チェック→親も自動チェック
複数のグループが同ページ内で出てきても対応可能
inputにクラスつけるだけ

といった機能をつけてみました。ソースは下記のようになります。

HTML

<div class="parent">
<h3><label for="parent-01"><input type="checkbox" class="check-parent" />親チェックボックス</label></h3>
<ul>
<li><label for="child-01"><input type="checkbox" class="check-child" id="child-01" />子チェックボックス1</label></li>
<li><label for="child-02"><input type="checkbox" class="check-child" id="child-02" />子チェックボックス2</label></li>
<li><label for="child-03"><input type="checkbox" class="check-child" id="child-03" />子チェックボックス3</label></li>
</ul>
</div>

Javascript

$(document).ready(function() {
//セレクタを変数に格納
var $tgt_parent = $("input.check-parent");
var $tgt_child = $("input.check-child");

//親チェックボックス関数
$tgt_parent.click(function(){
$(this).parents("div.parent").find('ul li input.check-child').attr('checked', this.checked);
});

//子チェックボックス関数
$tgt_child.click(function(){
var checkNum = $(this).parents('ul').find('li input.check-child:checked').length;
var listNum = $(this).parents('ul').find('li').length;

if(checkNum < listNum){
$(this).parents("div.parent").find("input.check-parent:checkbox").attr('checked','');
}

if(checkNum == listNum){
$(this).parents("div.parent").find("input.check-parent:checkbox").attr('checked','checked');
}
});
});

解説

まず、ターゲットとなる親のチェックボックス、子供のチェックボックスを変数に格納します。
親のチェックを入れたりはずしたりで子供も同様にチェックが入る用にします。

子供のチェックを入れる（外す）際は、チェックが入った数とliの数を数えて、同じ数であれば親にチェックをいれ、チェックの数がliの数より少なければ親のチェックを外す、といった処理をしています。
また、下記のコードも記述しておくことでページ読み込み時のチェックボックスも監視して親にチェックを入れるかどうか判別します。

//ロード時にチェックボックスを監視→子全てチェック済の場合→親チェック
$(document).ready(function() {$(document).ready(function() {
var checkNum = $("input.check-child:checked").parents('ul').find('li input.check-child:checked').length;
var listNum = $("input.check-child:checked").parents('ul').find('li').length;
if(checkNum == listNum){
$("input.check-child:checked").parents("div.parent").find("input.check-parent:checkbox").attr('checked','checked');
}
});

フォームのインターフェースではしばしば使われるものかと思いますが、我ながら結構汎用性が高いものが作れたかなと思います。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。