Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

WEBアプリでよくあるバグ

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/06/10 14:00

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

目次

現象

よくある承認画面
よくある承認画面
必須チェックの誤動作バグ
必須チェックの誤動作バグ

 上の画面は、ワークフロー機能でよくある承認画面です。チェックボックスで選択したデータは、[承認]ボタンをクリックすることで、状態を「承認待ち」から「承認済み」へ変更できます。入力チェックとして、「選択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("1件も選択されていません。");
  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行しか出力されていませんでした。

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2008/06/17 01:25 「DOMを利用した修正」を追加しました。

著者プロフィール

  • 山城拓明(ヤマシロヒロアキ)

    Web系SE。某企業にてWebシステム開発や新人Java研修講師を担当。Webアプリケーション開発における「よくあるハマるバグ」をまとめ、著書「バグ攻略で極めるWeb開発のツボ」(翔泳社)を出版。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5