こんな場合はこの記事を見てね!
そのものずばり!の内容じゃなくてもヒントになるはずです♪
ファイルをアップロードしようと思ったら「アクセスが拒否されました」
ウインドウをリサイズ、移動しようとしたら「アクセスが拒否されました」
form部品の初期値を取得したい、初期値に戻したい
form部品すべてにアクセスしたい
配列の値を削除したい
配列の値を並び替えたい
javascriptでtry-catch!
IEでclass名を取得したい
IEでonclick属性をセットしたい

2006年11月17日

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

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 11:31 | Comment(0) | TrackBack(0) | Form Elements
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。