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

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

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

: 【JS】今更ながら Ajax について整理してみる

今更感もありますが、よくわからないままに使っていた「Ajax」について理解したいと思い立ったので、概論からjQueryでの使い方など含めて、整理してみましたのでご紹介。

: 購入小計を即時計算するためのJavascript

EC系サイトでよくある、購入数フォームに数値を入力し、その小計を即時計算するJa ...

: 【JS】jQueryでAタグ（リンク）を無効化する方法

jQueryを使い、Aタグ（リンク）を無効にするスクリプトを作成したのですが、ちょくちょく出てくるたびに調べるか自分で書いた過去ネタを探しに行っているので、備忘録としてポストします。

: 【JS】jQueryUIのカレンダー(Datepicker)から生年月日を選択すると年齢（と経過月)をリアルタイムに表示するスクリプトを組んでみた

生年月日（年/月/日）を選択すると、リアルタイムで通算の年齢と年月日を表示させるスクリプトが必要になったので、せっかくなので勉強含みで自分で組んでみました。

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

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

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

過去ポスト

デモ

Bootstrap仕様のラジオボタン

HTML

CSS

スクリプト

デモ

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

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

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

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

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

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