Eyecatch jQuery

Javascript,jQuery

jQueryでチェックボックスを一括でチェックし、背景色も変えるスクリプトを組んでみた

2015/06/02

ひとつ前のラジオボタンに近しいことですが、今度はcheckboxをいじってみようということで、

  1. チェックしたcheckboxの背景色の変更
  2. checkboxの一括チェック

に挑戦してみました。

一括チェックは一行の場合はすぐに出来たのですが、数行ある場合に効率のいいコードを書かねばということでちょっと苦戦しましたが、出来上がったコードを見ると、やはり少ない行数で表現できている jQuery の効率の良さにいつもながら感心。

選択したcheckboxの背景色を変えてみる

正確には、labelの背景色を変更する、ですね。

イメージ

20150602_checkbox_bgcolor1

html

テーブルにcheckboxを配置しているだけです。イメージは、なんらかのシステムにおける、権限付与のページです。

CSS

続いてCSS。
チェック済の背景色を指定しているだけで、特に何もしていません。

JS

最後に jQuery のスクリプト。

簡単な説明

(1) どのチェックボックスを対象とするかの指定。changeイベントを使用。
(2) changeイベントでフォーカスが外れた inout type=”checkbox” の次の要素(この場合は『label』です)の class=”checked” を削除。
(3) changeイベントでフォーカスを得た inout type=”checkbox” の次の要素(この場合は『label』です)に class=”checked” を付与。
(4) 初期表示(ページが読まれた時)にchangeイベントを一回実行させる

ひとつ前のコードほぼそのままですね。使い回しが効くってのもいいですねぇ。
これで、チェック対象のcheckbox(にあるラベル)の背景色が変更されます。

デモ:背景色変更(一括チェックなし) (別ウィンドウが開きます)

一括チェックしてみる

では次に、一括でチェック、チェックを外すということをさせてみます。

イメージ

20150602_checkbox_bgcolor2

HTML

HTMLは以下のようにします。まずは一列のみです。

jQueryスクリプト

簡単な説明

(1)~(4)は先の、背景色を変更するのと同じです。
(5) 全て選択をクリックされた時の処理で、 labelにクラス「checked」 付与
(6) inputに checked="checked" 付与
(7) 解除をクリックされた時の処理で、labelからクラス「checked」を削除
(8) inputから checked="checked" を削除

これで(一列だけですが)一括チェックが可能になります。

デモ

デモ:背景色変更(一括チェックあり)(別ウィンドウで開きます)

複数行の場合の一括チェック

チェックボックスが複数行ある場合は上記スクリプトでは対応できないので、対応できるように改良。

イメージ

20150602_checkbox_bgcolor3

HTML

テーブルにcheckboxを並べてみます。

jQueryのスクリプト

大して行数はありません。

デモ

デモ:複数行・一括チェックあり(別ウィンドウで開きます)

簡単な説明

(5) クリックされた func のインデックス番号を取得
(6) labelにクラス「checked」 付与
(7) inputに checked="checked" 付与

(8) クリックされた func のインデックス番号を取得
(9) labelのクラス「checked」削除
(10)inputから checked="checked" 削除

やっていることはほとんど、2番めのスクリプトと変わりませんが、何番目というインデックスを取得し、それに対応する行に対し処理を行っています。
処理内容は、「.closest('label')」では対象のチェックボックスが取得できないので、find('label')を使い、フィルタ形式で取得しています。
たったこれだけの改造でしたが、最初はセレクタに配列を使ってみてはどうかなど、行き着くまでにはあーでもないこーでもないと色々と考え、数時間かかってしまいました。
最終的にはやはり少ない行数で完成。

うーん、jQueryって素晴らしい。

-Javascript,jQuery
-, , ,