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, ラジオボタン, 背景色

: ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた。

ブラウザごとに異なるCSSのclassを付与し、見た目を変えてみる仕組みをjQueryを使って作ってみました。

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

: 【JS】クレジットカード番号を入れるフォームで、4桁入れ終わったら次のフォームにフォーカスを移すスクリプトをjQueryで組んでみた

クレジットカード番号を入れるフォーム（4つに分割してる）を入力する際の入力補助として、4桁入れ終わったら次のフォームにフォーカスを移すというスクリプトを組んでみました。

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

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

: 【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる

「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているような、カウントダウンしていくタイマーが必要になったので、その設置方法の紹介です。今回は「jQuery Countdown」というライブラリを使用します。

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

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

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

過去ポスト

デモ

Bootstrap仕様のラジオボタン

HTML

CSS

スクリプト

デモ

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

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

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

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

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

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