checkboxの入力チェック

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。

HTMLのForm要素、checkboxの入力チェックをするJavascript。実は意外な落とし穴があったりするのですが、↓のサンプルは対応済み。

Script

  1. function chNull(msg,obj) {
  2. if(!obj) return true;
  3.  
  4. if((obj.type || obj[0].type) == 'checkbox'){
  5. var flag = 0;
  6.  
  7. if(obj.length){
  8. for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; }
  9. } else {
  10. if(obj.checked) flag = 1;
  11. }
  12.  
  13. if(flag == 0) {
  14. alert(msg + 'を選択してください。');
  15. return false;
  16. }
  17. }
  18. return true;
  19. }

解説

チェックボックス上から1つずつ確認していって、1つでもチェックされていたら「flag = 1」にする。で、flagが0のままならalert出すと。

7~11行目は、次のように書くこともできる。

  1. for(var i=0; i<obj.length; i++) if(obj[i].checked) flag = 1;

何故こうしなかったかというと、checkboxが1つだけの場合にうまく動かないから。これはJSの妙な挙動で、「配列の要素が1つだけ」の場合は、配列として扱われない。つまり変数扱いになるわけね。

  1. if(obj.length){
  2. for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; }
  3. } else {
  4. if(obj.checked) flag = 1;
  5. }

で、上のようになったと。この記述が意味を持ってくるのはブログの管理画面なんかで、記事一覧からまとめて削除する時とか。動的に生成されてる要素では、チェックできる記事やコメントが1つだけってのは十分ありうる話。

追記(2006.10.11)

Nein!さんからレビュー貰いました。

これは引数で渡すからであって、最初から配列を返すメソッドを使えば問題はない。 – Nein!, Javascript - 入力チェック

一連のレビューの完成版によると、つまり7~11行目は、次のように書くことができる。

  1. var list=document.getElementsByName(objName);
  2. for(var i=0;i<list.length;i++){
  3. if(list[i].checked){
  4. flg = 1;
  5. }
  6. }

うん、完璧! 後は対応ブラウザとご相談。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。