点击复选框，单击周围的TD

Question

我有一个表，在一列中有一个复选框。我希望用户能够通过点击复选框或周围的td来检查（或取消选中）复选框。为了使事情复杂化（可能），复选框设置了一个onchange事件（为了清楚起见，我在这里放了doSomething（））。

这是我目前的html：你可以看到我使用jQuery。

<tr> 
    <td onclick="jQuery(this).children('input').click();"> 
    <input id="dvdorders-77_packed" name="dvd_orders[77][packed]" onchange="doSomething()" type="checkbox" value="1"> 
    </td> 
</tr> 

我认为这是工作正常，但随后注意到，当我实际复选框点击，这算作上的复选框，单击并在TD上点击，在复选框有效点击两次，所以设置它并立即再次取消设置（并触发doSomething（）两次）。

必须有更好的方法来做到这一点 - 任何人？谢谢，最大

Answer 1

要停止传播史：

$("#dvdorders-77_packed").click(function(e){ 
    // do your stuff 
    e.stopPropogation(); 
}); 

这也可以内嵌如果需要的话（虽然不是理想）来完成。为了清晰起见，我将其分开。

Answer 2

您可以检查事件的目标以限制您的操作。这是我所知道的最好的通用解决方案。

简单检查：

event.target === this 

例子：

$("#mytable td").has("input:checkbox").click(function(event) { 
    if (event.target === this) { 
     var $checkbox = $(this).children("input:checkbox"); 
     $checkbox.attr('checked', !$checkbox.attr('checked')); 

     // Or simply $(this).children("input:checkbox").trigger('click'); 
    } 
}); 

演示：http://jsfiddle.net/Yb6YF/6/

Answer 3

 <tr> 
     <td id="clickTd"> 
     <input id="dvdorders-77_packed" name="dvd_orders[77][packed]" 
     onchange="doSomething()" type="checkbox" value="1"> 
     </td> 
    </tr> 

    jQuery('#clickTd').click(function(e) 
    { 
     e.preventDefault(); 
     var id = jQuery(this).attr('id'); 

     if(id == "dvdorders-77_packed") 
     { 
      //perform logic 
     } 
     else 
     { 
      //perform other logic 
     } 
     }); 

这是我在想什么，不知道这是数量级你在做什么？