CakePHP

CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる

2015/06/02

CakePHPのバージョンは1.3です。
スマホ用ページを作った際にユーザビリティ向上のため、選択されたラジオボタン内容の背景色をjQueryを使い変更してみたので、その忘備録です。
背景色を変えることで、どのラジオボタンが選択中であるか分かりやすくするのを狙っています。

作る上で何がややこしかったかと言えば、CakePHPが吐き出すラジオボタンのlabelにIDなりclassの指定方法が分からなかったってこと。
指定できれば割と簡単に出来たような気もするのですが、分からなかったものは仕方ないということで、工夫してみました。

デモ

デモ

デモ(別ウィンドウで開きます)

各スクリプト

cakephpのビュー

普通の書き方(だと信じたい)です。

で、こちらが吐き出されるHTML。
labelがinputの前に書けたり、classを指定できればよかったのですが、書き方が分からなかったのでこのままのソースに実現させるこにとしました。

CSS

次にCSS。選択時の背景色の指定と領域に1ピクセルのボーダーを書いているだけです。

JS

ではjQueryのスクリプト。
changeイベントをメインの処理とします。

簡単な解説

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

このスクリプトで一番大切だと思ったのが (4) のtorigger。

changeイベントは対象がクリックされ、フォーカスを得る/外れる時に実行されるイベントなので、初期表示の段階ですでに選択されているラジオボタンに対しては適応されません。
初期表示のときにも適応させるために、最初にページが読み込まれたときに、一度changeイベントを実行させています。

つくって覚えるjQuery入門

つくって覚えるjQuery入門

オフィス加減

価格 : 18,117円


-CakePHP
-, , , , , ,