checkboxを全てcheckを画像ボタンで

質問

一つのフォームの中に、複数のcheckboxのグループがあって
そのグループ毎に、全てチェック、解除ボタンをつけているのですが
それを画像のボタンで実現したいのですが、どのようにしたらいいでしょうか？

*通常のボタンでは動作していますが、画像をボタンにした時に動作しません。

チェックを入れて、その場面にとどまって欲しいのに
画像で作るとチェックを入れて、検索してしまいます。

以下、現在と、画像ボタンのうまく動かないものも書いています。

よろしくお願いいたします。

<SCRIPT language="JavaScript">
<!--
// チェックボックスに使用している名前
chn1 = new Array("bukken_ID[1]","bukken_ID[2]");
// 全てのチェックボックをチェックする
function chBxOn1(){
for(i=0; i<chn1.length; i++) {
document.nForm.elements[chn1[i]].checked = true;
}
}
// 全てのチェックボックのチェックを外す
function chBxOff1(){
for(i=0; i<chn1.length; i++) {
document.nForm.elements[chn1[i]].checked = false;
}
}
//-->
</SCRIPT>
<SCRIPT language="JavaScript">
<!--
// チェックボックスに使用している名前
chn = new Array("ku_area[1]","ku_area[2]");
// 全てのチェックボックをチェックする
function chBxOn2(){
for(i=0; i<chn2.length; i++) {
document.nForm.elements[chn2[i]].checked = true;
}
}
// 全てのチェックボックのチェックを外す
function chBxOff2(){
for(i=0; i<chn2.length; i++) {
document.nForm.elements[chn2[i]].checked = false;
}
}
//-->
</SCRIPT>

<form id="form2" name="nForm" method="post" action="#">

<input type="checkbox" name="bukken_ID[1]" id="bukken_ID" value="1" /> マンション
<input type="checkbox" name="bukken_ID[2]" id="bukken_ID" value="2" /> 一戸建て

<input type="button" value="全てチェックを入れる" onclick="chBxOn1()" />
<input type="button" value="チェック解除" onclick="chBxOff1()" />

<input type="checkbox" name="ku_area[1]" id="ku_area" value="1"/>住所１
<input type="checkbox" name="ku_area[2]" id="ku_area" value="2"/>住所２

<input type="button" value="全てチェックを入れる" onclick="chBxOn2()" />
<input type="button" value="チェック解除" onclick="chBxOff2()" />

<input type="submit" name="button3" id="button3" value="以上の条件で検索" />

</form>

以下、うまく動かない画像のボタンです。

<input type="image" src="img/allcheck1.gif" alt="全てチェックを入れる" onClick="chBxOn1()">
<input type="image" src="img/riset.gif" alt="チェック解除" onClick="chBxOff1()">

回答No.1

yambejp · ベストアンサー

type="image"はサブミットします。
それをとめるにはreturn falseすることです
だいぶ無駄がおおいソースだったのでこんな感じでどうでしょう？

<script>
function ch(obj,flg){
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].parentNode==obj.parentNode){
f[i].checked=flg;
}
}

return false;
}
</script>

<form id="form2" name="nForm" method="post" action="#">
<div>
<input type="checkbox"> マンション
<input type="checkbox"> 一戸建て
<input type="button" value="全てチェックを入れる" onclick="return ch(this,true)">
<input type="button" value="チェック解除" onclick="return ch(this,false)">
<input type="image" src="img/allcheck1.gif" alt="全てチェックを入れる" onclick="return ch(this,true)">
<input type="image" src="img/riset.gif" alt="チェック解除" onclick="return ch(this,false)">
</div>
<div>
<input type="checkbox">住所１
<input type="checkbox">住所２
<input type="button" value="全てチェックを入れる" onclick="return ch(this,true)">
<input type="button" value="チェック解除" onclick="return ch(this,false)">
<input type="image" src="img/allcheck1.gif" alt="全てチェックを入れる" onclick="return ch(this,true)">
<input type="image" src="img/riset.gif" alt="チェック解除" onclick="return ch(this,false)">
</div>
<div>
<input type="submit" value="以上の条件で検索">
</div>
</form>

お礼

少し、自力で考えてみました。
以下の文言を、ヒントに前のソースを書き換えて見ました。
（一つ除いて、外したりするので。）

＞type="image"はサブミットします。
＞それをとめるにはreturn falseすることです

少し、自力で考えてみました。
以下の文言を、ヒントに前のソースを書き換えて見ました。
（一つ除いて、外したりするので。）

＞type="image"はサブミットします。
＞それをとめるにはreturn falseすることです

<SCRIPT language="JavaScript">
chn1 = new Array("bukken_ID[1]","bukken_ID[2]");

function chBxOn1(){
for(i=0; i<chn1.length; i++) {
document.nForm.elements[chn1[i]].checked = true;
}
return false;　// ←この行を入れました。
}

function chBxOff1(){
for(i=0; i<chn1.length; i++) {
document.nForm.elements[chn1[i]].checked = false;
}
return false;　// ←この行を入れました。
}
</SCRIPT>

おかげさまで、やりたいことが実現いたしました。
いつもありがとうございます。

補足

yambejp 様

ありがとうございます。
ソースまで書いていただいて。。
（まだ、半分くらいしか意味が分かっていませんが）

頂いたソースだけで動かすと、希望通りの動作をいたします。

そこで、自分のページに組み込むと何も反応いたしません。
どこがおかしいのでしょうか？

それから、実はcheckbox　のセットの中に一つだけ、これ以外に全部チェックを入れるというのがあるのですが、それはどうしたらいいでしょうか？
実際のソースで言うと、駐車場以外にcheckなのです。。。

良かったら、是非再度アドバイスお願いいたします。
（アドバイスと言うより、回答のソースを頂いているのですが）

よろしくお願いいたします。

以下、実際のソースです(HTML部分です)。
javascryptは、頂いたたまま使っています。

<form id="form2" name="nForm" method="post" action="#">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr><td width="800" height="40">

<table width="790" border="0" cellpadding="0" cellspacing="0" id="u_inner_tbl"><tr>
<td width="110"><input type="checkbox" name="bukken_ID[2]" id="bukken_ID" value="2" <? if($bukken_2=="2"){ echo "checked"; } ?> /> マンション</td>
<td width="110"><input type="checkbox" name="bukken_ID[1]" id="bukken_ID" value="1" <? if($bukken_1=="1"){ echo "checked"; } ?> /> 一戸建て</td>
<td width="110"><input type="checkbox" name="bukken_ID[3]" id="bukken_ID" value="3" <? if($bukken_3=="3"){ echo "checked"; } ?> /> コーポ</td>
<td width="110"><input type="checkbox" name="bukken_ID[4]" id="bukken_ID" value="4" <? if($bukken_4=="4"){ echo "checked"; } ?> /> アパート</td>
<td width="350"><input type="checkbox" name="bukken_ID[8]" id="bukken_ID" value="8" <? if($bukken_8=="8"){ echo "checked"; } ?> /> 駐車場</td>
</tr>
<tr><td colspan="4">
<input type="image" src="img/allcheck_b_shubetu.gif" alt="全てチェックを入れる" onclick="return ch(this,true)">
<input type="image" src="img/nocheck_b.gif" alt="チェック解除" onclick="return ch(this,false)">
</td><td>&nbsp;</td></tr></table>

</td></tr><tr><td height="100">

<table width="409" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="91"><input type="checkbox" name="ku_area[2]" id="checkbox11" value="2" <? if($ku2=="2"){ echo "checked"; } ?>/>エリア１</td>
<td width="91"><input type="checkbox" name="ku_area[3]" id="checkbox11" value="3" <? if($ku3=="3"){ echo "checked"; } ?>/>エリア２</td>
<td width="91"><input type="checkbox" name="ku_area[1]" id="checkbox11" value="1" <? if($ku1=="1"){ echo "checked"; } ?>/>エリア３</td>
<td width="91"><input type="checkbox" name="ku_area[4]" id="checkbox11" value="4" <? if($ku4=="4"){ echo "checked"; } ?>/>エリア４</td>

<td width="45">&nbsp;</td></tr><tr>
<td colspan="4">
<input type="image" src="img/allcheck_b_aria.gif" alt="全てチェックを入れる" onclick="return ch(this,true)">
<input type="image" src="img/nocheck_b.gif" alt="チェック解除" onclick="return ch(this,false)"></td>
<td>&nbsp;</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="190"><input type="checkbox" name="roomtype[1]" id="roomtype9" value="1" <? if($room1==1){echo "checked";}?> />間取り１</td>
<td width="190"><input type="checkbox" name="roomtype[2]" id="roomtype9" value="2" <? if($room2==2){echo "checked";}?> />間取り２</td>
<td width="190"><input type="checkbox" name="roomtype[3]" id="roomtype9" value="3" <? if($room3==3){echo "checked";}?> />間取り３</td>
<td width="220"><input type="checkbox" name="roomtype[4]" id="roomtype9" value="4" <? if($room4==4){echo "checked";}?> />間取り４</td>
</tr>
<tr>
<td colspan="7">
<input type="image" src="img/allcheck_b_madori.gif" alt="全てチェックを入れる" onclick="return ch(this,true)">
<input type="image" src="img/nocheck_b.gif" alt="チェック解除" onclick="return ch(this,false)"></td>
<td>&nbsp;</td>
</tr>
</table>

</td></tr><tr><td><input typ