Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。
Bootstrapのクセというべきか、labelタグにラジオボタンがラップられているので、少しだけ以前書いたスクリプトと違っています。
jQueryでラジオボタンの背景色を変更するスクリプト
過去ポスト
以前書いたポストはコチラ。
CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる
スマホ用ページを作った際にユーザビリティ向上のため、選択されたラジオボタン内容の背景色をjQueryを使い変更してみたので、その忘備録です。背景色を変えることで、どのラジオボタンが選択中であるか分かりやすくするのを狙っています。
nodoame.net
2012.09.28
ラジオボタンの背景色をjQueryを使って変更してみる その２
以前ポストした選択したラジオボタンの背景色を変更するスクリプトを少し改造し、多数のラジオボタンを対象とするスクリプトを作成したので、備忘録としてポストします。
nodoame.net
2014.12.08
デモ
今回のデモはこちらから。
Bootstrapのラジオボタンの背景色を変更するスクリプト
![]()
![]()
Bootstrapのラジオボタンの背景色を変更するスクリプト
lightning-bolt.xyz
Bootstrap仕様のラジオボタン
HTML
CSS・Bootstrap
![]()
![]()
Redirecting…
getbootstrap.com
上記URLのサンプルを使ってみます。
3つめ（一番下）のオプションに関しては disabled が付与されているので選択不可となっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> |
CSS
チェック時の背景色を指定
|
1 2 3 4 5 |
<style> .checked { background: #9acd32; } </style> |
スクリプト
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function(){ $('.radio :radio').change( function() { $('.radio :radio').parent().removeClass('checked'); $('.radio :checked').parent().addClass('checked'); } ).trigger('change'); }); </script> |
チェックされたラジオボタンの親要素である label タグに、checkedクラスを付与するようにしています。
親要素へは .parent() でアクセスしています。
あとは例によって読み込んだときに実行する .trigger() で change を実行しているだけ。
簡潔なスクリプトですね。
jQuery を使わずに CSS3 でするって手段もあるのですが、jQuery が好きなのでこっちを使ってみました。
デモ
今回のデモはこちらから。
Bootstrapのラジオボタンの背景色を変更するスクリプト
![]()
![]()
Bootstrapのラジオボタンの背景色を変更するスクリプト
lightning-bolt.xyz
