通过单击周围的 td 单击复选框答案

【问题标题】：Click checkbox by clicking in the surrounding td通过单击周围的 td 单击复选框
【发布时间】：2011-11-18 01:52:16
【问题描述】：

我有一个表格，其中一列有一个复选框。我希望用户能够通过单击复选框或周围的 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() 两次）。

一定有更好的方法来做到这一点 - 有人吗？谢谢，最大

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你想停止传播：

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

如果需要，这也可以内联完成（虽然不理想）。为了清楚起见，我把它分开了。

【讨论】：

【解决方案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/

【讨论】：

【解决方案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
        }
      });

我就是这么想的，不知道是不是按照你做的顺序？

【讨论】：