人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ラジオボタンのチェックとlabelの背景色を連動させたいんです。
どなたかお力を・・・
なるべく美しいコーディングで。IE6,FireFox,Safari対応

<style type=”text/css”>
<!--
label { display:block; float: left; width: 60px; height: 60px; border:1px solid #000; }
label.color1{ background-color:red }
-->
</style>

<fieldset>
<legend>test</legend>
<label for=”a”><input type=”radio” name=”test” value=”0” id=”a” checked />a</label>
<label for=”b”><input type=”radio” name=”test” value=”1” id=”b” />b</label>
<label for=”c”><input type=”radio” name=”test” value=”2” id=”c” />c</label>
</fieldset>

●質問者: hanakorori
●カテゴリ:ウェブ制作
✍キーワード:background-color border firefox IE6 RED
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● weLoge
●0ポイント

<style type=”text/css”>

<!--

label { display:block; /float: left; width: 60px; height: 60px; border:1px solid #000; }

label.color1{ background-color:red }

#a_label {

background-color:red;

}

-->

</style>

<script type=”text/javascript”>

<!--

function function_bg_change(object_id,color){

document.getElementById(object_id).style.backgroundColor=color;

}

//-->

</script>


<fieldset>

<legend>test</legend>

<label for=”a” id=”a_label”><input type=”radio” name=”test” value=”0” id=”a” checked=”checked” onclick=”function_bg_change(’a_label’,’red’)” />a</label>

<label for=”b” id=”b_label”><input type=”radio” name=”test” value=”1” id=”b” onclick=”function_bg_change(’b_label’,’blue’)” />b</label>

<label for=”c” id=”c_label”><input type=”radio” name=”test” value=”2” id=”c” onclick=”function_bg_change(’c_label’,’yellow’)” />c</label>

</fieldset>


これで出来ます。Safariだと表示が崩れるのでfloatは切ってあります。何も選択していない状態にするならば、checked=”checked”をカットして、#a_label もカットしてください。

◎質問者からの返答

ありがとうございます。

チェックを入れると他のところの背景色が元に戻ったらいいな・・言葉足らずでした。

要はチェックが入ってるところの背景色だけ色を替えたい。引き続きよろしくお願いします。


2 ● weLoge
●100ポイント

改造してみました。ちなみにSafariではformでくくらないと切り替えは出来ませんので。


<html>

<head>

<meta http-equiv=”Content-type” content=”text/html; charset=Shift_JIS”>

<style type=”text/css”>

<!--

label { display:block; /float: left; width: 60px; height: 60px; border:1px solid #000; }

label.color1{ background-color:red }

-->

</style>

<script type=”text/javascript”>

<!--

function function_bg_change(object_id,color){

for (i = 0; i < document.getElementsByTagName(”label”).length; i++) {

document.getElementsByTagName(”label”)(i).style.backgroundColor=””;

}

document.getElementById(object_id).style.backgroundColor=color;

}

//-->

</script>

</head>

<body onload=”function_bg_change(’a_label’,’red’)”>


<form action=”./” onload=”function_bg_change(’a_label’,’red’)”>

<fieldset>

<legend>test</legend>

<label for=”a” id=”a_label”><input type=”radio” name=”test” value=”0” id=”a” checked=”checked” onclick=”function_bg_change(’a_label’,’red’)” />a</label>

<label for=”b” id=”b_label”><input type=”radio” name=”test” value=”1” id=”b” onclick=”function_bg_change(’b_label’,’blue’)” />b</label>

<label for=”c” id=”c_label”><input type=”radio” name=”test” value=”2” id=”c” onclick=”function_bg_change(’c_label’,’yellow’)” />c</label>

</fieldset>

</form>


</body>

</html>

◎質問者からの返答

何度もありがとうございます。

FireFoxじゃだめでした・・・


3 ● izayoimizuki
●144ポイント

<style type=”text/css”>

<!--

#a_label{background-color:#f00;}

-->

</style>

<script type=”text/javascript”>

<!--

function function_bg_change(object_id,color){

document.getElementById(object_id).style.backgroundColor=color;

}

//-->

</script>

<fieldset>

<legend>test</legend>

<label for=”a” id=”a_label”><input type=”radio” name=”test” value=”0” id=”a” checked=”checked” onblur=”function_bg_change(’a_label’,’#ffffff’)” onload=”function_bg_change(’a_label’,’#ff0000’)” onclick=”function_bg_change(’a_label’,’#ff0000’)” />a</label>

<label for=”b” id=”b_label”><input type=”radio” name=”test” value=”1” id=”b” onblur=”function_bg_change(’b_label’,’#ffffff’)” onclick=”function_bg_change(’b_label’,’#0000ff’)” />b</label>

<label for=”c” id=”c_label”><input type=”radio” name=”test” value=”2” id=”c” onblur=”function_bg_change(’c_label’,’#ffffff’)” onclick=”function_bg_change(’c_label’,’#ffff00’)” />c</label>

</fieldset>

ではいかがでしょうか。


MSIE 6.0 SP2,Mozilla 1.8b1,Opera 7.54u2で動作確認しました。


KHTML系(Konqueror,OmniWeb,Safari等)は未確認ですがonblurハンドラの歴史やCSSの使いからしてMSIE3.0,Netscape 4.X,Opera 4.X以降で動くでしょう。

KHTMLはKHTMLも2.X系以降で動くといえるでしょう。Safariは3.X系をベースにしているのでほとんど問題ないでしょう。


これはとても広範囲のブラウザに対応できますが全く問題が無いというわけではなくラジオボタン以外でもクリックされるとレーベルの色が白色に戻ってしまうことです。

WinIEで動けば良いという大幅な妥協も必要かもしれません。

当然ブラウザの種類に関わらず正しく動くようW3Cの提唱する規格をベンダーが忠実に実装する事に越したことは有りません。


# 質問とは関係有りませんがOperaの方がユーザー数が多いのでKHTML系で動くことよりもOperaで動くことを優先する方が良いといえます。

◎質問者からの返答

ありがとうございました。これで意図したことができます。助かりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ