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】クレジットカード番号を入れるフォームで、4桁入れ終わったら次のフォームにフォーカスを移すスクリプトをjQueryで組んでみた

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

: 半角英数から全角英数へなど、文字を変換するスクリプトをjQueryを使って組んでみた。

郵便局サイトの住所を入れる際、地番を入れる欄にて「全角数字を使え」という旨のエラーが出ました。
何でわざわざ全角で数字？漢数字ならまだしも、半角数字で入力されている場合はフロントエンドでなんとでもなるだろう。

: 【jQuery】複数対応！テキストエリアの文字数をカウントするスクリプト

複数個のテキストエリアに対し文字数をカウント、文字数をリアルタイムで表示する事になったので、スクリプトを組んでみました。

: jQueryのtoggleSlideを使ってみる

ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。これも検索頻度の高いものなので、自分のメモとして残しておきます。

: 【JS】ブラウザの横幅をjQueryで動的に取得・表示する方法

jQueryを使い、ブラウザの横幅を動的に取得・表示するスクリプトを紹介します。

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

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

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

過去ポスト

デモ

Bootstrap仕様のラジオボタン

HTML

CSS

スクリプト

デモ

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

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

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

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

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

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