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

2014/12/08 2019/12/16

以前ポストした選択した、ラジオボタンの背景色を変更するスクリプトを少し改造し、多数のラジオボタンを対象とするスクリプトを作成したので、備忘録としてポストします。

ラジオボタンの背景色を変更してみる

以前のポストはこちら。

前回は「性別」ということで、選択肢が２つしか無かったのですが、今回は複数の選択肢を使う場合の方法です。

HTML

<table border="1" cellpadding="5" cellspacing="0" class="table1">
<tr>
<th>ラジオ１</th>
<td>
<input type="radio" name="data[Sample1][flg]" id="Sample1Flg1" value="1" />
<label for="Sample1Flg1">Radio1 内容1</label> 

<input type="radio" name="data[Sample1][flg]" id="Sample1Flg2" value="2" />
<label for="Sample1Flg2">Radio1 内容2</label> 

<input type="radio" name="data[Sample1][flg]" id="Sample1Flg3" value="3" />
<label for="Sample1Flg3">Radio1 内容3</label> 

<input type="radio" name="data[Sample1][flg]" id="Sample1Flg4" value="4" />
<label for="Sample1Flg4">Radio1 内容4</label> 
</td>
</tr>
</table>

<br>

<table border="1" cellpadding="5" cellspacing="0" class="table2">
<tr>
<th>ラジオ２</th>
<td>
<input type="radio" name="data[Sample2][flg]" id="Sample2Flg1" value="1" />
<label for="Sample2Flg1">Radio2 内容1</label> 

<input type="radio" name="data[Sample2][flg]" id="Sample2Flg2" value="2" />
<label for="Sample2Flg2">Radio2 内容2</label> 

<input type="radio" name="data[Sample2][flg]" id="Sample2Flg3" value="3" />
<label for="Sample2Flg3">Radio2 内容3</label> 

<input type="radio" name="data[Sample2][flg]" id="Sample2Flg4" value="4" />
<label for="Sample2Flg4">Radio2 内容4</label> 
</td>
</tr>
</table>

<tr>

<td>

<label for="Sample1Flg1">Radio1 内容1</label>

<label for="Sample1Flg2">Radio1 内容2</label>

<label for="Sample1Flg3">Radio1 内容3</label>

<label for="Sample1Flg4">Radio1 内容4</label>

</td>

</tr>

</table>

<br>

<tr>

<td>

<label for="Sample2Flg1">Radio2 内容1</label>

<label for="Sample2Flg2">Radio2 内容2</label>

<label for="Sample2Flg3">Radio2 内容3</label>

<label for="Sample2Flg4">Radio2 内容4</label>

</td>

</tr>

</table>

テーブルを２つ用意し、そのテーブルに class を付けます。
ラジオボタンの内容は前回同様、CakePHP で作成されるものを基準としています。

CSS

<style>
.checked{
    background-color: #ffdb00;
}
</style>

<style>

.checked{

background-color: #ffdb00;

}

</style>

CSSは背景色の指定をしているだけです。

JS

<script src="./js/jquery1.8.1.min.js"></script>
<script>
// ラジオボタン背景色
$(function(){
    $('.table1,.table2 :radio').change(     // ★1
        function() {
            // Radio1
            $('.table1 :radio').next().removeClass('checked');  // ★2
            $('.table1 :checked').next().addClass('checked');   // ★3

            // Radio2
            $('.table2 :radio').next().removeClass('checked');  // ★4
            $('.table2 :checked').next().addClass('checked');   // ★5
        }
    ).trigger('change');    // ★6
});
</script>

// ラジオボタン背景色

$(function(){

$('.table1,.table2 :radio').change( // ★1

function() {

// Radio1

$('.table1 :radio').next().removeClass('checked'); // ★2

$('.table1 :checked').next().addClass('checked'); // ★3

// Radio2

$('.table2 :radio').next().removeClass('checked'); // ★4

$('.table2 :checked').next().addClass('checked'); // ★5

}

).trigger('change'); // ★6

});

</script>

最後にスクリプト。
内訳を簡単に。

★1：テーブルの class を利用し、その中に含まれる radio を対象と指定。changeイベントを使用。

【テーブル1】
★2：changeイベントでフォーカスが外れた inout type=”radio” の次の要素（この場合は『label』です）の class=”checked” を削除。
★3：changeイベントでフォーカスを得た inout type=”radio” の次の要素（この場合は『label』です）に class=”checked” を付与。

【テーブル2】
★4：★2と同様
★5：★3と同様

★6：初期表示（ページが読まれた時）にchangeイベントを一回実行させる

デモ

-Javascript,jQuery
-cakephp2, javascript, jquery, js, ユーザビリティ, ラジオボタン, 背景色

: プルダウンメニュー連動でテキストを切り替えるスクリプトをjQueryで組んでみた

プルダウンメニューを選択した際に指定のテキストを表示させるスクリプトを作って欲しいという要望があったので jQuery で作ってみました。

: jQueryでJSON、JSONP 連携してみる。

jQuery の $.ajax() を利用してjson、jsonp形式のデータを ...

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

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

: 【jQuery】台湾ドル to 日本円コンバータを作ってみた

前回のポストネタであるJSONP取得を使い、台湾ドルの為替レートAPIを利用して ...

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

PREV: Gmailで未読メールだけを表示する方法
NEXT: 単焦点レンズ NIKKOR AF-S DX 35mm F1.8 を購入！

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

ラジオボタンの背景色を変更してみる

HTML

CSS

JS

デモ

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

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

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

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

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

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

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

ラジオボタンの背景色を変更してみる

HTML

CSS

JS

デモ

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