データが1件の時だけ、JavaScriptの必須チェックが誤動作する

WEBアプリでよくあるバグ

Webプログラマが誰でも一度はハマる「チェックボックスが１個の時のみ発生するバグ」を解説します。

現象

よくある承認画面

必須チェックの誤動作バグ

　上の画面は、ワークフロー機能でよくある承認画面です。チェックボックスで選択したデータは、［承認］ボタンをクリックすることで、状態を「承認待ち」から「承認済み」へ変更できます。入力チェックとして、「選択0件で承認ボタンをクリックしたときはエラー表示」という処理をJavaScriptで実装しています。

　ところが、データが1件の時だけ、「選択しているのに『1件も選択されていません』というエラーが出る」というバグが発生しました。

バグコード

　入力チェックのコードは、次のようになっていました。

バグを含んだJavaScriptのソース

function check() {
  var sentakuChk = document.form1.sentakuChk;
  for (var i=0; i<sentakuChk.length; i++) {
    if (sentakuChk[i].checked) {
      return true;
    }
  }
  alert("１件も選択されていません。");
  return false;
}

　フォーム部品に関係するHTMLは、データが3件ある場合は次のようになっています。

フォーム部品に関係する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行しか出力されていませんでした。

　さて、バグの原因は何でしょう？