取的复选框，单击下一步TD的内容

Question

如何被点击

<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> 

的复选框，当下次td的内容获取我的JavaScript代码：

var c=new Array(); 
c=window.document.getElementsByTagName('input'); 
for(var i=0;i<c.length;i++) 
{ 
    if(c[i].type=='checkbox') 
    { 
     alert(c[i].parentNode.parentNode.rows[0].innerHTML); 
    } 
} 

我想取单击复选框时下一个td的内容。对于第一行，FOOBAR应该被提取等等。

编辑

需要注意的几点：我敢肯定，我使用 这个问题上的标签。请不要发布任何指向某些JS 库的答案。 jQuery的等

Answer 1

这似乎是工作，虽然它是非常 HTML依赖（如涉及当然DOM遍历，很多的JavaScript）：

var c = []; 

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

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

JS Fiddle demo。

参考文献：

• firstChild。
• `nextElementSibling。
• nodeValue。
• parentNode。
• trim()。

Answer 2

我已经使用jQuery的。我猜这没关系？

​$('input:checkbox').live('click', function() { 
     alert($(this).parent().next('td').text()); 
    });​​​​​​​​​​​​​​​ 

Answer 3

使用jQuery，会更好，在这里你的解决方案：

$('[type=checkbox]').on('click', function(){ 
    var html; 
    if($(this).is(':checked')) { 
    html = $(this).parent().next('td').html(); 
    alert(html); 
    } 
}); 
​ 

DEMO：http://jsfiddle.net/oscarj24/yYuzS/