单击父项时的jQuery切换复选框

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

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

下面是我的js函数：

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

---

谢谢。

检查单击元素的类型。否则，您将试图获取一个不存在的元素

$(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"));
            }
        }
    });
});​   

---

检查单击的元素的类型。否则，您将试图获取一个不存在的元素

$(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"));
            }
        }
    });
});​   

当事件源不是带有onoff类的td时，您需要旁路事件代码，您可以这样做

​

当事件源不是带有onoff类的td时，您需要旁路事件代码，您可以这样做

---

​

它以这种方式运行的原因是，输入正在触发父单击事件，此时将成为复选框，而不是单击的td，因此。findinput[type=checkbox]不会选择任何内容，因此不会执行任何操作

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

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

---

它以这种方式运行的原因是，输入触发父单击事件，此时将成为复选框，而不是单击的td，因此。findinput[type=checkbox]不会选择任何内容，因此不会执行任何操作

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

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

添加以下内容：

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

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

添加以下内容：

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

---

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

使用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>

---

用于属性而不是任何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>

---

谢谢你的解释，还有很好的解决方案+1。虽然决定使用@Adil的解决方案，但只在一行中完成了这项工作，在本例中，我可以更轻松地使用他的解决方案管理我的js文件。感谢您的解释，这也是一个不错的解决方案+1。虽然决定使用@Adil的解决方案，但只做了一行，在这个例子中，我更容易用他的解决方案管理我的js文件。很好的替代js，不幸的是，这个项目将需要动态生成大量不同大小的表。在td上添加一个类比添加额外的标记和代码来处理唯一标识符更容易。很好地替代了js，不幸的是，这个项目将需要动态生成大量不同大小的表。在td上添加类比添加额外的标记和代码来处理唯一标识符更容易。