ドロップダウンを選択し、ドロップダウンの選択された値が空でない場合にチェックボックスを自動的にチェックします。

Question

人々がドロップダウンを選択し、ドロップダウンの選択された値が空でない場合、チェックボックスが自動的にチェックされます。しかし、私は "sel [i] is undefined"エラーに出会った。

Javascriptの一部：

var chk = document.getElementsByTagName("input"); 
var sel = document.getElementsByTagName("select"); 

    for (var i=0; i< sel.length; i++) { 
     sel[i].onchange = function(){ 

     if (sel[i].value !== ''){ 
     chk[i].checked = true; 

    } 
    else{ 
     chk[i].checked = false; 

    } 
    }; 
} 

HTML部分：

<form name="form1"> 
<div class="container"> 
<input id='checkbox_id1' name='checkbox_id1' type='checkbox' value='1' /></label>&nbsp; 

Select 
     <label> 
      <select id="select_id1" name="select"> 
      <option value=""></option> 
      <option value="111">111</option> 
      <option value="222">222</option> 
      </select> 
      </label> 

    <hr> 
<input id='checkbox_id2' name='checkbox_id1' type='checkbox' value='1' /></label>&nbsp; 


Select 
     <label> 
      <select id="select_id2" name="select"> 
      <option value=""></option> 
      <option value="111">111</option> 
      <option value="222">222</option> 
      </select> 
      </label> 
</div>  

jsfiddle：http://jsfiddle.net/planetoid/GwEuu/

Answer 1

iのあなたの価値は、あなたがそれだと思うものではありませんforループ理由完了まで実行されているb実際にはいずれかのイベントハンドラが呼び出される前に、iはforループの最後の値になります。

var chk = document.getElementsByTagName("input"); 
var sel = document.getElementsByTagName("select"); 

for (var i = 0; i < sel.length; i++) { 
    (function(i) { 
     sel[i].onchange = function(){ 
      chk[i].checked = sel[i].value !== ''; 
     } 
    })(i); 
} 

の作業のデモ：http://jsfiddle.net/jfriend00/yds6w/

各イベントハンドラのiの適切な値をキャプチャするには、それぞれ特定のイベントハンドラの閉鎖でそれをキャプチャし、このように関数を実行し、自己を使用することができます

参考までに、.checked割り当てコードも簡略化しました。

---

しかし、あなたのコードを少し見てから、これは自己実行機能を必要としない、それを実装するより良い方法かもしれないと思います。チェックボックスと入力タグの完全な並列配列に頼るのではなく、selectのIDを対応するチェックボックスのIDに変換し、thisを使用してselect要素を参照するだけです。したがって、iはイベントハンドラでは使用されません。

の作業のデモ：http://jsfiddle.net/jfriend00/g3UQG/

Answer 2

私はそれを私にビートjfriend00見るが、あなたはまた、同じ効果を達成するために、この構文を使用することができます（私はまた、内のコードを短縮）：

var chk = document.getElementsByTagName("input"), 
    sel = document.getElementsByTagName("select"); 

for (var i=0; i< sel.length; i++) { 
    sel[i].onchange = (function (i) { 
     return function(){  
      chk[i].checked = sel[i].value !== ''; 
     }; 
    }(i)); 
}