メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQueryでチェックボックスの一括チェックオン/オフを制御する

よくある"一覧表示リストに並んでいるチェックボックスを一括でon/off制御するコードです"。
一斉チェックとも言いますね。

リストのチェックボックスには class="list-check" をあてて
それをコントロールするチェックボックスには class="check-all" をあてます。

リスト内のチェックボックスをすべてチェックしきった時には
コントロールチェックボックス(check-all)にもチェック。
(実際にはクリックの度に論理演算しなおしてセット)

一括用のチェックボックスをチェックon/offした場合は
その値をリスト内のすべてのチェックボックスにセット。
また、一括用のチェックボックスがヘッダ・フッタ両方に存在していても
正しく動くようにスタイルクラスを取るような実装になっています。

なお、チェックボックスの値取得・セットは

var 値 = $('checkbox').prop('checked'); // 取得
$('checkbox').prop('checked', 値); // セット

とするのが良いです。