Eyecatch jQuery

Javascript,jQuery

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

2016/10/31

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

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

以前のポストはこちら。

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

HTML

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

CSS

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

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
-, , , , , ,