画像をラジオボタンとして使用したい

画像をラジオボタンとして使いたいと思っています。
（onclickで画像を切り替えて選択状態にする等）

どんな方法があるでしょうか。
どなたかよろしくお願いします。

No.1 回答者： yambejp 回答日時： 2005/11/05 17:03

データの管理方法から考えて、radioを隠してつかう

のが妥当でしょう。
onclickでonに変更することは簡単ですが、offにする
のがめんどうですネ。
総じてこんな風になるのでしょうか…
(仰々しくてすみません)

<form>
<span style="display:none"><input type="radio" name="radio1" id="radioa" value="a" onClick="radiochange(this.value)"></span>
<label for="radioa"><img src="off.gif" id="imga">aaa</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radiob" value="b"
onClick="radiochange(this.value)"></span>
<label for="radiob"><img src="off.gif" id="imgb">bbb</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radioc" value="c"
onClick="radiochange(this.value)"></span>
<label for="radioc"><img src="off.gif" id="imgc">ccc</label><br>
</form>

<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["a"]=document.getElementById('imga');
objimg["b"]=document.getElementById('imgb');
objimg["c"]=document.getElementById('imgc');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>

No.2 ベストアンサー 回答者： yambejp 回答日時： 2005/11/06 20:35

別の環境でやったらlabelがうまく動かなかった

ので、訂正します。

<form>
<span style="display:none"><input type="radio" name="radio1" id="radio1_1" value="1" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_1').click()"><img src="off.gif" id="img1_1">項目１</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_2" value="2" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_2').click()"><img src="off.gif" id="img1_2">項目２</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_3" value="3" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_3').click()"><img src="off.gif" id="img1_3">項目３</span><br>
</form>

<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["1"]=document.getElementById('img1_1');
objimg["2"]=document.getElementById('img1_2');
objimg["3"]=document.getElementById('img1_3');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>

この回答へのお礼

無事動作いたしました。

yambejpさん、丁寧に対応してくださってありがとうございました！

お礼日時：2005/11/07 10:26