現象
![よくある承認画面 よくある承認画面](http://cz-cdn.shoeisha.jp/static/images/article/2544/2544_01.gif)
![必須チェックの誤動作バグ 必須チェックの誤動作バグ](http://cz-cdn.shoeisha.jp/static/images/article/2544/2544_02.gif)
上の画面は、ワークフロー機能でよくある承認画面です。チェックボックスで選択したデータは、[承認]ボタンをクリックすることで、状態を「承認待ち」から「承認済み」へ変更できます。入力チェックとして、「選択0件で承認ボタンをクリックしたときはエラー表示」という処理をJavaScriptで実装しています。
ところが、データが1件の時だけ、「選択しているのに『1件も選択されていません』というエラーが出る」というバグが発生しました。
バグコード
入力チェックのコードは、次のようになっていました。
function check() { var sentakuChk = document.form1.sentakuChk; for (var i=0; i<sentakuChk.length; i++) { if (sentakuChk[i].checked) { return true; } } alert("1件も選択されていません。"); return false; }
フォーム部品に関係するHTMLは、データが3件ある場合は次のようになっています。
<form name="form1"> <input name="sentakuChk" type="checkbox" value="11111"> <input name="sentakuChk" type="checkbox" value="11112"> <input name="sentakuChk" type="checkbox" value="11113"> <input name="shouninBtn" type="submit" value="承認" onclick="return check();"> </form>
チェックボックスのタグ(太字部分)は、サーバ側プログラムにより動的に生成されるもので、バグ発生時は1行しか出力されていませんでした。
さて、バグの原因は何でしょう?