ラジオボタンの背景色を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を使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。