ラジオボタンの背景色を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 ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

: jQueryでロールオーバーのスクリプトを組んでみた

jQueryの勉強として、マウスカーソルが乗った時にアニメーション（フェードイン、フェードアウト）しながら切り替わる「ふんわりロールオーバープラグイン」を作成してみました。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 【JS】jQueryで画像のみマウスの右クリックを出来ないようにするスクリプトを組んでみた

画像の上でマウスの右クリック（コンテクストメニューの表示）が出来ないようにするスクリプトをjQueryを使って作成したので、紹介します。

: 【jQuery】フォームの値を取得 / チェックするスクリプト

jQueryを使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。

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

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

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

HTML

CSS

JS

デモ

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

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

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

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

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

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

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

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

HTML

CSS

JS

デモ

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