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

原因

JavaScript上でフォーム部品は、同名の要素が複数あるときのみ配列として扱われます。従って、今回のバグのようにチェックボックスが1個の時は、配列の長さを表すlengthプロパティが未定義(undefined)となり、for文の中に制御が移りません。

for (var i=0; i<sentakuChk.length; i++) { ←ここでsentakuChk.lengthが取得できない

結果、表示データが1件のみの時は選択状態にかかわらず、エラーメッセージが表示されてしまいます。

対策

動的に数が変わる同名のフォーム部品をJavaScriptで扱うときは、数が1個の時と複数の時で分けて処理を書きます。

プログラム修正例

チェックボックスが1個か複数かは、JavaScriptでのチェックボックスを表すプロパティが配列になっているかどうか(=lengthプロパティがあるかどうか)で判断できます。

チェックボックス1個の場合に対応したソース
function check() {
  var sentakuChk = document.form1.sentakuChk;
  // チェックボックスが複数の時
  if (sentakuChk.length) {
    for (var i=0; i<sentakuChk.length; i++) {
      if (sentakuChk[i].checked) {
        return true;
      }
    }
  // チェックボックスが1個の時
  } else if (sentakuChk.checked) {
    return true;
  }
  alert("1件も選択されていません。");
  return false;
}
補足
if文の条件に未定義(undefined)のプロパティが渡された場合、真偽値としては「偽」になるため、if文の中は実行されません。
プログラム修正例「0個対応」

上記のコードは、チェックボックスが0個の場合には対応していません。0個の場合はdocument.form1.sentakuChk自体が未定義になるので、lengthプロパティの呼び出しでエラーが発生します。

チェックボックスがない時のエラー(IEの場合、ステータスバーの警告アイコンをダブルクリックすると表示されます)

データが0件でも承認ボタンを表示する画面仕様ならば対応する必要があります。lengthプロパティを参照する前に、sentakuChkオブジェクトの存在確認が必要です。

チェックボックス0個の場合にも対応したソース
function check() {
  var sentakuChk = document.form1.sentakuChk;
  // チェックボックスが複数の時
  if (sentakuChk && sentakuChk.length) {
    for (var i=0; i<sentakuChk.length; i++) {
      if (sentakuChk[i].checked) {
        return true;
      }
    }
  // チェックボックスが1個の時
  } else if (sentakuChk && sentakuChk.checked) {
    return true;
  }
  alert("1件も選択されていません。");
  return false;
}

このブログの人気の投稿

ActionFormのresetメソッド

ビルド・パスのエラーが解決されるまで、プロジェクトをビルドできません

ORCLE SQL '_' アンダースコアについて