【JS】jQueryでチェックボックスを一括でチェックし、背景色も変えるスクリプトを組んでみた
2019/01/25
ひとつ前のラジオボタンに近しいことですが、今度はcheckboxをいじってみようということで、
- チェックしたcheckboxの背景色の変更
- checkboxの一括チェック
に挑戦してみました。
一括チェックは一行の場合はすぐに出来たのですが、数行ある場合に効率のいいコードを書かねばということでちょっと苦戦しましたが、出来上がったコードを見ると、やはり少ない行数で表現できている jQuery の効率の良さにいつもながら感心。
選択したcheckboxの背景色を変えてみる
正確には、labelの背景色を変更する、ですね。
イメージ
各種コード
html
テーブルにcheckboxを配置しているだけです。イメージは、なんらかのシステムにおける、権限付与のページです。
[html]
| 機能 | 権限付与 |
|---|---|
| 機能A |
|
| 機能B |
|
| 機能C |
|
| 機能D |
|
[/html]
CSS
続いてCSS。
チェック済の背景色を指定しているだけで、特に何もしていません。
[css]
[/css]
JS
最後に jQuery のスクリプト。
[js]
[/js]
簡単な説明
(1) どのチェックボックスを対象とするかの指定。changeイベントを使用。
(2) changeイベントでフォーカスが外れた inout type=”checkbox” の次の要素（この場合は『label』です）の class=”checked” を削除。
(3) changeイベントでフォーカスを得た inout type=”checkbox” の次の要素（この場合は『label』です）に class=”checked” を付与。
(4) 初期表示（ページが読まれた時）にchangeイベントを一回実行させる
ひとつ前のコードほぼそのままですね。使い回しが効くってのもいいですねぇ。
これで、チェック対象のcheckbox（にあるラベル）の背景色が変更されます。
デモ
https://lightning-bolt.xyz/js/jquery.tgCheckboxBgChange/index1.html
一括チェックしてみる
では次に、一括でチェック、チェックを外すということをさせてみます。
イメージ
各種コード
HTML
HTMLは以下のようにします。まずは一列のみです。
[html]
| 機能 | 全て | 権限付与 |
|---|---|---|
| 機能A | 選択｜解除 |
|
[/html]
jQueryスクリプト
[js]
[/js]
簡単な説明
(1)～(4)は先の、背景色を変更するのと同じです。
(5) 全て選択をクリックされた時の処理で、 labelにクラス「checked」 付与
(6) inputに checked="checked" 付与
(7) 解除をクリックされた時の処理で、labelからクラス「checked」を削除
(8) inputから checked="checked" を削除
これで（一列だけですが）一括チェックが可能になります。
デモ
https://lightning-bolt.xyz/js/jquery.tgCheckboxBgChange/index2.html
複数行の場合の一括チェック
チェックボックスが複数行ある場合は上記スクリプトでは対応できないので、対応できるように改良。
イメージ
各種コード
HTML
テーブルにcheckboxを並べてみます。
[html]
| 機能 | 全て | 権限付与 |
|---|---|---|
| 機能A | 選択｜解除 |
|
| 機能B | 選択｜解除 |
|
| 機能C | 選択｜解除 |
|
| 機能D | 選択｜解除 |
|
[/html]
jQueryのスクリプト
大して行数はありません。
[js]
[/js]
デモ
https://lightning-bolt.xyz/js/jquery.tgCheckboxBgChange/index.html
簡単な説明
(5) クリックされた func のインデックス番号を取得
(6) labelにクラス「checked」 付与
(7) inputに checked="checked" 付与
(8) クリックされた func のインデックス番号を取得
(9) labelのクラス「checked」削除
(10)inputから checked="checked" 削除
やっていることはほとんど、２番めのスクリプトと変わりませんが、何番目というインデックスを取得し、それに対応する行に対し処理を行っています。
処理内容は、「.closest('label')」では対象のチェックボックスが取得できないので、find('label')を使い、フィルタ形式で取得しています。
たったこれだけの改造でしたが、最初はセレクタに配列を使ってみてはどうかなど、行き着くまでにはあーでもないこーでもないと色々と考え、数時間かかってしまいました。
最終的にはやはり少ない行数で完成。
うーん、jQueryって素晴らしい。