社内SEの徒然なる日記

画像のクリックでラジオボタンを変更してみた(HTML & javaScript)

■ やりたいこと

前に、ラベルのクリックでラジオボタンを選択する方法(HTMLでチェックボックスとラジオボタンをラベルで選択してみた)を書いたのですが、今度は画像(jpg)をクリックすることでラジオボタンを選択できるようにしたくなりました。

こんな感じの表があったとして、①~④の何れかをクリックすると、その左のラジオボタンが選択されるようにしたいのです。
HTMLでradioを画像で変更1

③をクリックすると、上から3番目のラジオボタンが選択されるってことですね。
HTMLでradioを画像で変更2

最初、IMGタグをLABELで囲ってみたのですが、動きません。
...まぁ、当然ですよね。

■ onClickイベント

ここは素直に、IMGタグにonClickイベントを設定します。

こんな感じですかね?

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function selectIndexImg(chkimg) {
document.all.selectIndex[chkimg].checked = true;
}
</SCRIPT>
</HEAD>
<BODY>

<TABLE border="1" cellspacing="0">
<TR>
<TD>
<INPUT type="radio" name="selectIndex" value="0">
</TD>
<TD>
<IMG src="./数字丸 (0).JPG" onClick="JavaScript:selectIndexImg(0);">
</TD>
</TR>
<TR>
<TD>
<INPUT type="radio" name="selectIndex" value="1">
</TD>
<TD>
<IMG src="./数字丸 (1).JPG" onClick="JavaScript:selectIndexImg(1);">
</TD>
</TR>
<TR>
<TD>
<INPUT type="radio" name="selectIndex" value="2">
</TD>
<TD>
<IMG src="./数字丸 (2).JPG" onClick="JavaScript:selectIndexImg(2);">
</TD>
</TR>
<TR>
<TD>
<INPUT type="radio" name="selectIndex" value="3">
</TD>
<TD>
<IMG src="./数字丸 (3).JPG" onClick="JavaScript:selectIndexImg(3);">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


まず、radioの名前を全てselectIndexにします。

JavaScriptでselectIndexImgってメソッドを作っておきます。
こいつは、渡された引数の値をselectIndexのインデックスとして使用。選択状態にします。

後は、IMGタグのonClickイベントで、JavaScript「selectIndexImg」に選択したいradioのインデックスを渡してやれば完成です。


投稿記事の一覧:http://harikofu.web.fc2.com/

--- blog end ---

スポンサードリンク

PageTop

コメント


管理者にだけ表示を許可する