ラジオボタンの背景色を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を使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。

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

Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。

: 【JS】「コナミコマンド」入力でアクションを起こすスクリプトを作ってみた

以前より作ってみたかった「コナミコマンド」スクリプトを、時間が空いたところで作ってみました。

: jQueryで「ミニロト」番号ジェネレータを作ってみた

JavaScript でランダムな文字列なり数値を作成するのってどうするんだ、と思い調査しました。

: 【JS】スマホ用のQ&AページをslideToggleを使って作ってみる

「よくある質問」のページがやたらと長くなるのが気になり、jQuery の slideToggle を使い、ずらっと並べた質問文をクリック（タップ）したら回答部分がアコーディオン形式で表示されるようにしてみました。この先、絶対にまた使うことだと思うので、備忘録も兼ねてのポストとします。

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

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

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

HTML

CSS

JS

デモ

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

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

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

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

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

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

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

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

HTML

CSS

JS

デモ

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