如果所選下拉列表的值不爲空，請選擇下拉菜單並自動選中複選框

Question

當用戶選擇下拉菜單時，如果所選下拉列表中的值不爲空，則該複選框將自動檢查。但是我遇到了「sel [i]是未定義的」錯誤。

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循環末尾處的值。

要捕捉的i適當的值用於每個事件處理，您可以使用自執行這樣捕獲它在一個封閉每一個特定事件處理函數：

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/

僅供參考，我還簡化了.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)); 
}