點擊複選框，單擊周圍的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 
     } 
     }); 

這是我在想什麼，不知道這是數量級你在做什麼？