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

: Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

: 【jQuery】時刻の入力補助スクリプト jquery.tgClockPickTip2 を作ってみた

以前、時刻の入力補助ライブラリを紹介しましたが、さらに使いやすいライブラリ「jQuery UI Time Picker by Francois Gelinas」を発見。その完成度の高さに感動し「ソースを見ないで同じものを作ってみよう！」と練習の意味も込めて、どこまで近づけるか力試しをしてみました。

: Bootstrap使用時にplaceholder属性の文字色を変更する方法。

Bootstrap使用時、HTML5の placeholder 属性の文字色を変更したい場合の方法を忘備録としてポストします。

: jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォー ...

: 【JS】スクロールしたら画面途中にあるグローバルナビを画面上部に固定する方法

トップページなどで、動画や画像コンテンツの下に配置してあったグローバルナビを、スクロールしたら画面上部に固定して表示するスクリプトを作成したので、備忘録を兼ねて紹介します。

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

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

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

過去ポスト

デモ

Bootstrap仕様のラジオボタン

HTML

CSS

スクリプト

デモ

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

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

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

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

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

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