CakePHPのバージョンは1.3です。
スマホ用ページを作った際にユーザビリティ向上のため、選択されたラジオボタン内容の背景色をjQueryを使い変更してみたので、その忘備録です。
背景色を変えることで、どのラジオボタンが選択中であるか分かりやすくするのを狙っています。
作る上で何がややこしかったかと言えば、CakePHPが吐き出すラジオボタンのlabelにIDなりclassの指定方法が分からなかったってこと。
指定できれば割と簡単に出来たような気もするのですが、分からなかったものは仕方ないということで、工夫してみました。
ラジオボタンの背景色を変更するスクリプト
「CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる」デモ
![]()
![]()
選択されたラジオボタンの背景色を変更してみる
このページはブログ『Wataame Frog』の「CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる」という記事のサンプルです
lightning-bolt.xyz
cakephpのビュー
普通の書き方（だと信じたい）です。
|
1 2 3 4 |
echo '<p>性別</p>'; echo '<p>'; echo $form->radio('Customer.gender', $gender_master, aa('class','radio', 'legend',false, 'separator',' ', 'label',true)); echo '</p>'; |
で、こちらが生成されるHTML。
labelがinputの前に書けたり、classを指定できればよかったのですが、書き方が分からなかったのでこのままのソースに実現させるこにとしました。
|
1 2 3 4 5 6 7 8 |
<p>性別</p> <p> <input id="CustomerGender1" class="radio" type="radio" checked="checked" value="1" name="data[Customer][gender]"> <label for="CustomerGender1">男性</label> <input id="CustomerGender2" class="radio" type="radio" value="2" name="data[Customer][gender]"> <label for="CustomerGender2">女性</label> </p> |
CSS
次にCSS。選択時の背景色の指定と領域に1ピクセルのボーダーを書いているだけです。
|
1 2 3 4 5 6 7 8 9 10 |
/* ラジオボタン チェック済 */ .checked{ background-color: #ffdb00; } /* 性別ラジオボタン */ p label{ padding: 0 20px; border: 1px solid #ffdb00; } |
JS
ではjQueryのスクリプト。
changeイベントをメインの処理とします。
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(function(){ $('input[type=radio]').change( // ←(1) function() { $('input').next().removeClass('checked'); // ←(2) $(':checked').next().addClass('checked'); // ←(3) } ).trigger('change'); // ←(4) }); </script> |
簡単な解説
- どのラジオボタンを対象とするかの指定。changeイベントを使用。
- changeイベントでフォーカスが外れた inout type=”radio” の次の要素（この場合は『label』です）の class=”checked” を削除。
- changeイベントでフォーカスを得た inout type=”radio” の次の要素（この場合は『label』です）に class=”checked” を付与。
- 初期表示（ページが読まれた時）にchangeイベントを一回実行させる。
このスクリプトで一番大切だと思ったのが (4) のtorigger。
changeイベントは対象がクリックされ、フォーカスを得る/外れる時に実行されるイベントなので、初期表示の段階ですでに選択されているラジオボタンに対しては適応されません。
初期表示のときにも適応させるために、最初にページが読み込まれたときに、一度changeイベントを実行させています。
[tgAmazonItemLookup asin=”4048708619″ related=”1″]
[tgAmazonItemLookup asin=”4798024767″ related=”1″]
