ラジオボタンの背景色をjQueryを使って変更してみる　その２

以前ポストした選択した、ラジオボタンの背景色を変更するスクリプトを少し改造し、多数のラジオボタンを対象とするスクリプトを作成したので、備忘録としてポストします。

ラジオボタンの背景色を変更してみる

以前のポストはこちら。

前回は「性別」ということで、選択肢が２つしか無かったのですが、今回は複数の選択肢を使う場合の方法です。

HTML

[html]

ラジオ１	Radio1 内容1  Radio1 内容2  Radio1 内容3  Radio1 内容4

ラジオ２	Radio2 内容1  Radio2 内容2  Radio2 内容3  Radio2 内容4

[/html]

テーブルを２つ用意し、そのテーブルに class を付けます。
ラジオボタンの内容は前回同様、CakePHP で作成されるものを基準としています。

CSS

[css]

[/css]

CSSは背景色の指定をしているだけです。

JS

[js]


[/js]

最後にスクリプト。
内訳を簡単に。

★1：テーブルの class を利用し、その中に含まれる radio を対象と指定。changeイベントを使用。

【テーブル1】
★2：changeイベントでフォーカスが外れた inout type=”radio” の次の要素（この場合は『label』です）の class=”checked” を削除。
★3：changeイベントでフォーカスを得た inout type=”radio” の次の要素（この場合は『label』です）に class=”checked” を付与。

【テーブル2】
★4：★2と同様
★5：★3と同様

★6：初期表示（ページが読まれた時）にchangeイベントを一回実行させる

デモ

-Javascript,jQuery
-cakephp2, javascript, jquery, js, ユーザビリティ, ラジオボタン, 背景色