Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト

2016/11/01 2019/12/16

Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。

Bootstrapのクセというべきか、labelタグにラジオボタンがラップられているので、少しだけ以前書いたスクリプトと違っています。

jQueryでラジオボタンの背景色を変更するスクリプト

過去ポスト

以前書いたポストはコチラ。

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

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

デモ

今回のデモはこちらから。

Bootstrap仕様のラジオボタン

HTML

上記URLのサンプルを使ってみます。
3つめ（一番下）のオプションに関しては disabled が付与されているので選択不可となっています。

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

<label>

Option one is this and that—be sure to include why it's great

</label>

</div>

<label>

Option two can be something else and selecting it will deselect option one

</label>

</div>

<label>

Option three is disabled

</label>

</div>

CSS

チェック時の背景色を指定

<style>
.checked {
    background: #9acd32;
}
</style>

<style>

.checked {

background: #9acd32;

}

</style>

スクリプト

<script>
$(function(){
    $('.radio :radio').change(
        function() {
            $('.radio :radio').parent().removeClass('checked');
            $('.radio :checked').parent().addClass('checked');
        }
    ).trigger('change');
});
</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, Javascript,jQuery
-bootstrap, ラジオボタン, 背景色

: 【JS】スマホ用のQ&AページをslideToggleを使って作ってみる

「よくある質問」のページがやたらと長くなるのが気になり、jQuery の slideToggle を使い、ずらっと並べた質問文をクリック（タップ）したら回答部分がアコーディオン形式で表示されるようにしてみました。この先、絶対にまた使うことだと思うので、備忘録も兼ねてのポストとします。

: 【JS】ランダム文字列を生成するサービスをPHP→JSにリファクタリングしてみた

リファクタリングという言葉を使いたくて、以前にPHPで作成した『ランダム文字列ジェネレータ』を、Javascriptを使って同じものを作ってみました。

: CakePHP2 + jQueryUIでテキストボックスにオートコンプリート（オートサジェスト）機能をつける方法

テキストボックスにオートコンプリート（オートサジェスト）機能を、CakePHP2 + jQueryUI環境で作成したので作り方を備忘録としてポストします。

: jQueryで日数計算をしてみる

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ？」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

: 【jQuery】JSONデータをフィルタリングして指定のフォームに項目として表示させる方法

データベースから取得したレコードをPHPでJSONデータ化し、javascriptでフィルタしてフォームに表示させる方法を試行錯誤してみたので、ご紹介。

PREV: 【CentOs】コマンドプロンプトのサーバホスト名を変更する方法
NEXT: 【css】リスト(UL/LI) を横並べにする「flexbox」の書き方

Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト

jQueryでラジオボタンの背景色を変更するスクリプト

過去ポスト

デモ

Bootstrap仕様のラジオボタン

HTML

CSS

スクリプト

デモ

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,175)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,496)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,929)

【歴史】江戸幕府歴代将軍一覧 (142,959)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,881)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,936)