日々のアンテナ

日々アンテナを貼って、いろんな情報をキャッチ、発信したいと思います。
2017年10月 ≪  123456789101112131415161718192021222324252627282930 ≫ 2017年12月
TOPサイトのこと ≫ form部品は数によって処理を分岐する

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]ってついやりたくなっちゃいますよね~。

Comment













非公開コメントにする
Trackback

Trackback URL