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
        }
      });

这就是我的想法，不知道这是否与您正在做的事情有关？

点击周围的td点击复选框

3 个答案: