爲什麼腳本在評估同一個腳本中的'element.checked'時會有所不同，它們作用於具有相同結構的不同錶行？

Question

我寫了一個這個問題的答案：Fetch content of next td on checkbox click，答案被接受（截至寫這個問題）。

目的是在包含輸入複選框的當前單元格後面查找表格單元格的文本值;對於第二行，這可以工作（在Chrome 18/WinXP中），但是在第一行中，評估console.log(that.checked);的計算結果爲false（無論我看到的是，是否被檢查）。

提供的HTML：

<table> 
    <tr> 
     <td> 
      <input type=checkbox name=t> 
     </td> 
     <td width=25%> 
      FOOBAR 
     </td> 
     <td width=73%> 
      BAZ 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type=checkbox name=t> 
     </td> 
     <td width=25%> 
      FOO 
     </td> 
     <td width=73%> 
      BAR 
     </td> 
    </tr> 
</table> 

而且我的JavaScript：

var c = []; 

c = window.document.getElementsByTagName('input'); 

for (var i = 0; i < c.length; i++) { 
    var that = c[i]; 
    if (that.type == 'checkbox') { 
     that.onchange = function() { 
      console.log(that.checked); 
      if (that.checked){ 
       console.log(that.parentNode.nextElementSibling.firstChild.nodeValue.trim()); 
      } 
     }; 
    } 
}​ 

JS Fiddle demo。

注意，它似乎向可靠第二行（和日誌FOO到控制檯）工作，但在第一行中只有false控制檯日誌。我正在犯一個明顯的錯誤嗎？

Answer 1

您實際上遇到了與checked無關的問題。您的that變量不在事件處理程序的範圍內，因此它始終解析爲c[1]。你需要自動換行的東西在一個封閉（又名function() { ... }();或者只是改變that到this事件處理程序中，如在此：http://jsfiddle.net/z88HH/3/

for (var i = 0; i < c.length; i++) { 
    var that = c[i]; 
    if (that.type == 'checkbox') { 
     that.onchange = function() { 
      console.log(this.checked); 
      if (this.checked){ 
       console.log(this.parentNode.nextElementSibling.firstChild.nodeValue.trim()); 
      } 
     }; 
    } 
}​ 

Answer 2

是不是that總是最後一排如嘗試console.log(that, that.checked)，它包在封閉看到你的編輯jsFiddle

for (var i = 0; i < c.length; i++) { 

    if (c[i].type == 'checkbox') { 
     c[i].onchange = function(){ 
      var that = c[i];      
      return function() { 
      console.log(that, that.checked); 
      if (that.checked){ 
       console.log(that.parentNode.nextElementSibling.firstChild.nodeValue.trim()); 
      } 
    }}(); 
    } 
}​