JQuery切换复选框输入与表格单元格点击

我想这样做,如果你点击表格单元格内的任何地方,单元格中的复选框将被切换.如果直接单击复选框,它也应该正常工作.

在这里,我使用红色边框空白“标签”作为可点击区域.理想情况下,我想避免标签.

http://jsfiddle.net/WPZf2/

<tr>
    <td><label><input type="checkbox"/></label></td>
    <td><input type="checkbox"/></td>
    <td><input type="checkbox"/></td>
</tr>

此处正在检测表格单元格.

http://jsfiddle.net/WPZf2/1/

$('td').click(function(){
        alert('click!');

如果返回false并单击复选框,则最初选中复选框,然后当您关闭警报弹出窗口时,复选框将再次清除. (至少在Chrome,Firefox和IE11中)

http://jsfiddle.net/WPZf2/2/

$('td').click(function(){
        alert('click!');
        return false;

我尝试了这个返回false并且没有返回.如果单击它可以工作的单元格,但如果单击该复选框则不起作用.

http://jsfiddle.net/WPZf2/3/

var $elem = $(this).find('input');
$elem.prop('checked', !$elem.prop('checked'));

如果我使用没有return语句的$elem.click()它有同样的问题.

http://jsfiddle.net/WPZf2/4/

$elem.click();

如果我有“返回假”,它根本不起作用：

http://jsfiddle.net/WPZf2/5/

所以基本上我希望能够单击单元格中的任意位置,包括直接在复选框上切换复选框.

这是另一种替代方式.

$(function(){
   $('td').click(function (event) {
     if (!$(event.target).is('input')) {
        var obj =$(this).find('input');      
        obj.prop('checked', !obj.is(':checked'));      
       }
   });
});

FIDDLE