どなたかお力を・・・
なるべく美しいコーディングで。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>
No.1
60
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 もカットしてください。
No.2
600
100pt
改造してみました。ちなみに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じゃだめでした・・・
No.3
3020
144pt
<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で動くことを優先する方が良いといえます。
ありがとうございました。これで意図したことができます。助かりました。
1
1
1
1
1
3
3
ありがとうございます。
チェックを入れると他のところの背景色が元に戻ったらいいな・・言葉足らずでした。
要はチェックが入ってるところの背景色だけ色を替えたい。引き続きよろしくお願いします。