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 回答日時： 2007/11/28 10:10

#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のそれぞれ、ひとつづつの画像ですが、
ボタンごとに違う画像を割り当てられるようンしたいです。

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

補足日時：2007/11/28 19:53

No.2 回答者： yambejp 回答日時： 2007/11/28 00:14

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 回答日時： 2007/11/27 17:31

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

<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)">

この回答への補足

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

補足日時：2007/11/27 18:25