form部品は数によって処理を分岐する

チェックボックスのチェックされている数を数えたり、テキストボックスの入力チェックをしたりとform elementの入力チェックではJavascriptを良く使います。
そして、JSPなどで行を自動生成するパターンだと、同名の部品数が可変になったりして、チェックはさらにややこしくなります。

たとえば、

あいうえお

こんな表があるとします。
でも

あいうえお

かきくけこ

になる可能性もあります。可変だからです。

<form name="myform">
<table>
<tbody>
<tr><td><input type="checkbox" name="check0">あいうえお</td></tr>
<tr><td><input type="checkbox" name="check1">かきくけこ</td></tr>
</tbody>
</table>
</form>

チェックされている個数を調べるのに
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.elements.length;
 for(var i = 0; i < len; i++){
  if(obj.elements["check" + i].checked){
   count++;
  }
 }
}
なんてやりたくなりますよね？
でもこれは使えません。なぜなら、form部品のlengthは1個のときは取得できないからです。
なので、今回はform.elements.lengthにしましたが、1個である場合と、それ以上ある場合の場合わけが必要になります。

上の例だと
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.elements.length;
 if(len > 1){
  for(var i = 0; i < len; i++){
   if(obj.elements["check" + i].checked){
    count++;
   }
  }
 }else{
  if(obj.elements["check" + 0].checked){
   count++;
  }
 }
}
こんな風にlengthが1より大きいかどうかで判断します。
（もしくはif(len){というように存在するかどうかで判断。）
if(len== 1){
なんて風にはできません。

チェックボックスの名前がたとえばすべて同じだった場合も同様に場合わけが必要です。
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.check.length;
 if(len > 1){
  for(var i = 0; i < len; i++){
   if(obj.elements["check"][i].checked){
    count++;
   }
  }
 }else{
  if(obj.elements["check"].checked){
   count++;
  }
 }
}
同名のelementの場合
form名.element名[何番目]でアクセスできますが、これは2個以上ある場合のみで、1個の場合はform名.element名でしかアクセスできません。
一個でもform名.element名[0]ってついやりたくなっちゃいますよね〜。

form部品の初期値を取得する

たとえばテキストボックスの値を変更した場合のみ入力チェックを行うとか、初期値と比較して処理を行うことって多いと思います。

初期値を取得するには、default○○を使います。
Form部品の種類によって使えるプロパティが違います。

input type="text",textareaの場合 defaultValue
optionの場合 defaultSelected
input type="checkbox"の場合 defaultChecked

例：もしテキストボックスの初期値から変更があった場合はアラートを表示する。

var obj = document.myform.mytext;
if(obj.value != obj.defaultValue){
 alert("変更されました。");
}

これ、一個や二個ならいいのですが、たとえばformのelements全てに対して初期値から変更があったかどうかをチェックするには、下のような方法が便利だと思います。

function initValue(target){
 var childs = target.childNodes;
 var flg = false;
 if(childs.length != 0){
  for(var i=0;i＆ｌｔ；childs.length;i++){
   if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "text"){
    if(childs(i).value != childs(i).defaultValue){
    flg = true;
    }
   }
   if(childs(i).tagName == "TEXTAREA"){
    if(childs(i).value != childs(i).defaultValue){
    flg = true;
    }
   }
   if(childs(i).tagName == "OPTION"){
    if(childs(i).selected != childs(i).defaultSelected){
    flg = true;
    }
   }
   if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "checkbox"){
    if(childs(i).checked != childs(i).defaultChecked){
    flg = true;
    }
   }
   var nextChilds = childs(i).childNodes;
   if(nextChilds.length != 0){
    initValue(childs(i));
   }
  }
 }
return flg;
}
引数のtargetには対象となるformを指定します。
webアプリだとやたらと大量のform部品を生成することが良くあります。
この方法、初期値との比較以外にも全てのform部品にアクセスしたいときによく使っています。

もっと良い方法があれば教えてくださいね。