一昨日の午後は本当に無駄な時間を過ごしてしまった
複数あるチェックボックスのチェックした数をリアルタイムに調べて、４つ以上チェックしたらワーニングを出そうと思って、以下のようなスクリプトを書いた。
function chkCHKBOX(idx){
var total = 0;
var max = window.document.form.elements['CHKBOX'].length;
for (var i = 0; i < max; i++) {
if (window.document.form.elements['CHKBOX'][i].checked) {
total += 1;
}
}
if (total > 3) {
alert("同時にチェックできるのは３つまでです");
window.document.form.elements['CHKBOX'][idx].checked = false;
}
}
jQuery 使ってひたすらチェックボックスの状況を監視するスクリプトを書いてもいいんだろうが、まあ、そこまでするほどじゃないので簡単な方法で。
HTML は、
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(0);" value="テレビ" />テレビ<br /><input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(1);" value="CD" />CD<br /><input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(2);" value="DVD" />DVD<br /><input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(3);" value="映画" />映画<br /><input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(4);" value="書籍" />書籍<br /><input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(5);" value="その他" />その他<br />
てな感じで。
チェックボックスの ONCLICK イベントが発生する度に chkCHKBOX 関数を実行するだけ。
チェック数が３個を超えていたら、ワーニングを出して、直近のチェックを外すだけという単純な動き。
なのに、上手くいかない。
チェックボックスをクリックしてもチェックが付かないのだ。１つ目から。３個超えたわけじゃないのに。
ま、原因は、最初に HTML を書いた時に、
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(0);return false;" value="テレビ" />テレビ<br />
としてたから。
他所の行をコピってきて、そのまま消し忘れてたは・・・
クリックされた時に実行させる関数の動きだけで処理を止める場合、最後に return false; を付ける。そうしないと、関数実行終了後にその FORM 本来の動きが実行されちゃうのだ。
例えば、type="submit" のボタンの ONCLICK イベントで document.form.submit(); みたいに FORM を実行してるのに、ちゃんと onClick="document.form.submit();return false;" みたいにしてないと、その後、今度は submit ボタン本来の動きで FORM が実行され二重実行になってしまう。そうしないためには、イベントの最後に return false; を入れて、FORM 本来の動きを中断させちゃうということ。
だから、今回の場合は、反対に return false; を付けてしまっていたため、「チェックボックスにチェックをつける」という FORM 本来の動きがキャンセルされて、「チェックすることができない」という状態になっていたのである。
ま、そんな単純なミスだったのに難しいことを考えてしまい、あれこれ処理の方を試して（一次はスクリプトの行数も倍に（笑））無駄な時間をすごしてしまったのだ。
己への戒めのためにブログに書いておこう(^^;
