onとoffを画像でチェンジ、チェックボックスと連動させる

質問

下記は画像をクリックした際に、onとoffに変更し、かつチェックボックスのvalueの値を変更しておりますが、
例えば、Ａ、Ｂ、Ｃ、Ｄ４個のボタンを準備し、それぞれにonとoffの画像を準備し割り当て、それぞれが、単独で、onとoffができるようにしたいのですが、どなたかご教授願います。

これは、１個のボタンを2枚の画像でオンとオフを切り替えていますが、4個のボタンでそれぞれのボタンのオンとオフの画像を準備して、それぞれのボタンのvalue値を変えたいというのがやりたい内容です。

<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.3

yambejp

#2はなんかバグってるぽいので修正

<script type="text/javascript">
function sample(obj,id){
var checkbox=document.getElementById(id);
if(obj.src.match(/on.gif$/)){
obj.src='off.gif';
checkbox.checked=false;
}else{
obj.src='on.gif';
checkbox.checked=true;
}
}
</script>

<img src="off.gif" onclick="sample(this,'CBOX1')">
<img src="on.gif" onclick="sample(this,'CBOX2')">
<img src="off.gif" onclick="sample(this,'CBOX3')">
<img src="on.gif" onclick="sample(this,'CBOX4')">
<input type="checkbox" name="CBOX1" id="CBOX1">
<input type="checkbox" name="CBOX2" id="CBOX2" checked>
<input type="checkbox" name="CBOX3" id="CBOX3">
<input type="checkbox" name="CBOX4" id="CBOX4" checked>

補足

ありがとうございます、、、
ですが、またもういっぽというところです、
画像が現在ですと、onとoffのそれぞれ、ひとつづつの画像ですが、
ボタンごとに違う画像を割り当てられるようンしたいです。

これが、できれば本当に感謝です。
よろしくお願いします。

回答No.2

yambejp

hiddenじゃなくてcheckboxですね・・・。

labelとかつかっちゃだめなんですか？
（もちろんjavascriptでもできますが）

<script type="text/javascript">
function sample(obj){
obj.src=obj.src.match(/on.gif$/)?'off.gif':'on.gif';
}
</script>

<label for="CBOX1"><img src="off.gif" onclick="sample(this)"><label>
<label for="CBOX2"><img src="on.gif" onclick="sample(this)"><label>
<label for="CBOX3"><img src="off.gif" onclick="sample(this)"><label>
<label for="CBOX4"><img src="on.gif" onclick="sample(this)"><label>
<input type="checkbox" name="CBOX1" id="CBOX1">
<input type="checkbox" name="CBOX2" id="CBOX2" checked>
<input type="checkbox" name="CBOX3" id="CBOX3">
<input type="checkbox" name="CBOX4" id="CBOX4" checked>

回答No.1

yambejp

画像を切り替えるだけならこんなんでよいのでは？

<script type="text/javascript">
function sample(obj){
obj.src=obj.src.match(/on.gif$/)?'off.gif':'on.gif';
}
</script>
<img src="off.gif" onclick="sample(this)">
<img src="on.gif" onclick="sample(this)">
<img src="off.gif" onclick="sample(this)">
<img src="on.gif" onclick="sample(this)">

補足

画像だけではなく、あくまでも、チェックボックスと連動しているオンオフのボタンを作りたいです。