（元）社内SEの徒然なる日記

画像のクリックでラジオボタンを変更してみた（HTML ＆ javaScript）

2014-01-10（Fri）

■　やりたいこと

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

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

③をクリックすると、上から３番目のラジオボタンが選択されるってことですね。

最初、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 ---