みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

これは、1個のボタンを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">

投稿日時 - 2007-11-27 17:06:38

QNo.3551448

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

#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>

投稿日時 - 2007-11-28 10:10:55

補足

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

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

投稿日時 - 2007-11-28 19:53:04

ANo.2

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>

投稿日時 - 2007-11-28 00:14:41

ANo.1

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

<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 17:31:40

補足

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

投稿日時 - 2007-11-27 18:25:06

あなたにオススメの質問