画像でチェックボックスを表示し、チェックの有無で画像を変える方法

質問

例えば、offという画像があり、その画像をクリックするとoff画像がon画像に変わり、もう一度クリックするとon画像になるというのを、チェックボックスで実現したいのですが、どなたかご教授願います。
よろしくお願いします。

回答No.4

yambejp

#2です。

画像をクリックしてチェックボックスをon/offしたいということでしょうか？
#2のソースでそのように稼働しますけどスクリプトでやりたいのですか？

補足

ありがとうございます。
最終的にやりたいことが近づいてきましたが、
チェックボックスが複数個、仮に4個あり、
onとoffの画像もそれぞれ4種類あった際、
例 A、B、C、D、Aのオンとオフ、Bのオンとオフというように、
画像もそれぞれ変えたいというのが最終的にやりたい内容です。
※画像はAのオンとオフ用の画像、BはBのオンとオフの画像というようにそれぞれ画像がことなります。

よろしくお願いします。

回答No.3

steel_gray

フォームでcheckboxを配置するところで、
代わりに画像を使いたい、という事でしょう？

マウスでしか操作できなくなるとか、弊害がありますが一応サンプルです。

<script type="text/javascript">
function sample(Img,name){
var onImg = 'on.gif';
var offImg = 'off.gif';
var Input = document.getElementsByName(name)[0];
if(Input.value){
Input.value = '';
Img.src = offImg;
}else{
Input.value = 'on';
Img.src = onImg;
}
}
</script>

<img src="off.gif" alt="" width="" height=""
onclick="sample(this,'CBOX1')">
<input type="hidden" name="CBOX1">

回答No.2

yambejp

こんな感じでどうでしょう？

<script>
function changeImg(obj,id){
var img=document.getElementById(id);
img.src=obj.checked?"on.gif":"off.gif";
}
</script>
<label for="check1"><img id="image1" src="off.gif"></label>
<input type="checkbox" id="check1" onClick="changeImg(this,'image1')">
<label for="check2"><img id="image2" src="off.gif"></label>
<input type="checkbox" id="check2" onClick="changeImg(this,'image2')">
<label for="check3"><img id="image3" src="off.gif"></label>
<input type="checkbox" id="check3" onClick="changeImg(this,'image3')">

補足

ありがとうござます、
大変恐縮ですが、チェックボックスをクリックした際のイベントではなく、画像をクリックした際のイベントととして実行したいです。
すみませんが、よろしくお願いします。

回答No.1

gogo724275

まず

＞offという画像があり、その画像をクリックするとoff画像がon画像に変わり、もう一度クリックするとon画像になるというのを

のソースを示してください。