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()">
お礼
回答ありがとうございます。 ファイル選択コントロールという呼び方は知りませんでした。