プログラミング: 2014年3月アーカイブ

一昨日の午後は本当に無駄な時間を過ごしてしまった

複数あるチェックボックスのチェックした数をリアルタイムに調べて、4つ以上チェックしたらワーニングを出そうと思って、以下のようなスクリプトを書いた。

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("同時にチェックできるのは3つまでです");
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 関数を実行するだけ。
チェック数が3個を超えていたら、ワーニングを出して、直近のチェックを外すだけという単純な動き。

なのに、上手くいかない。
チェックボックスをクリックしてもチェックが付かないのだ。1つ目から。3個超えたわけじゃないのに。

ま、原因は、最初に 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 本来の動きがキャンセルされて、「チェックすることができない」という状態になっていたのである。

ま、そんな単純なミスだったのに難しいことを考えてしまい、あれこれ処理の方を試して(一次はスクリプトの行数も倍に(笑))無駄な時間をすごしてしまったのだ。

己への戒めのためにブログに書いておこう(^^;

このアーカイブについて

このページには、2014年3月以降に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のアーカイブはプログラミング: 2014年1月です。

次のアーカイブはプログラミング: 2014年4月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら