jquery - 单击父级时的jQuery切换复选框

Question

我编写了一个简单的 js 函数来打开/关闭复选框，然后单击父级（在本例中为 TD）。当您单击 TD 上的任意位置时，此功能将按预期工作。

但是，当您单击复选框本身时，什么也没有发生。
我想知道的是为什么它会这样做，最好的解决方法是什么？

我提供了一个 jsfiddle 来演示这个。

这是我的js函数：

$("td.onoff").click(function() {
    var objCheckbox = $(this).find("input[type=checkbox]");
    if( objCheckbox.length >= 1 ) {
        objCheckbox.prop("checked", !objCheckbox.prop("checked"));
    }
});

谢谢。

Answer 1

你需要by pass event code when source of event is not td with class onoff，你可以这样做。

现场演示

$(function() {
    $("td.onoff").click(function(event) {          
        if(event.target.className != 'onoff') return;
        var objCheckbox = $(this).find("input[type=checkbox]");
        if( objCheckbox.length >= 1 ) {
            objCheckbox.prop("checked", !objCheckbox.prop("checked"));
        }
    });
});

​</p>

Answer 2

检查点击元素的类型。没有这个，你试图得到一个不存在的元素。

$(function() {
    $("td.onoff").click(function() {
        var type = $(this).attr('type');
        if ( type != "checkbox" ) {
            var objCheckbox = $(this).find("input[type=checkbox]");
            if( objCheckbox.length >= 1 ) {
                objCheckbox.prop("checked", !objCheckbox.prop("checked"));
            }
        }
    });
});​   

Answer 3

它以这种方式运行的原因是因为input正在触发父click事件，此时this成为复选框，而不是 clicked td，因此.find("input[type=checkbox]")不会选择任何内容，因此不会执行任何操作。

其他答案的替代方法是将click事件直接绑定到输入，并阻止它传播，例如：

$("td.onoff > input").click(function(e) {
  e.stopPropagation();        
});

这是一个演示

Answer 4

添加以下内容：

$("td.onoff :checkbox").click(function(event) {
    event.stopPropagation();
});

当您单击复选框时，这可以防止单击事件冒泡到容器中。

Answer 5

使用“for”属性而不是任何 javascript 函数这将像函数一样自动工作：就在 html 下方：

<tr class="row" >
        <td class="onoff" ><label for="check1"><input id="check1" type="checkbox" name="something[]" checked="checked" /></label></td>
    </tr>
    <tr class="row">
        <td class="onoff"><label for="check2"><input id="check2" type="checkbox" name="something[]" checked="checked" /></td>
    </tr>
    <tr class="row">
        <td class="onoff"><label for="check3"><input id="check3" type="checkbox" name="something[]" checked="checked" /></td>
 </tr>