单击父级时的jQuery切换复选框答案

【问题标题】：jQuery toggle checkbox when parent is clicked单击父级时的jQuery切换复选框
【发布时间】：2012-11-09 11:46:32
【问题描述】：

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

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

I have a provided a jsfiddle to demo this.

这是我的js函数：

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

谢谢。

【问题讨论】：

stackoverflow.com/questions/1467228/click-toggle-with-jquery

标签： jquery html checkbox toggle prop

【解决方案1】：

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

Live Demo

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

【讨论】：

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

【讨论】：

【解决方案3】：

之所以会出现这种行为是因为input正在触发父click事件，此时this成为复选框，而不是被点击的td，所以.find("input[type=checkbox]")不会选择任何内容，因此不会执行任何操作。

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

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

Here's a demo

【讨论】：

感谢您的解释，以及不错的解决方案 +1。不过，决定使用@Adil 的解决方案，一行完成了这项工作，在这种情况下，我更容易用他的解决方案管理我的 js 文件。

【解决方案4】：

添加以下内容：

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

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

【讨论】：

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

【讨论】：

js 的不错替代品，不幸的是，这个项目需要大量动态生成的各种大小的表格。在 td 上添加一个类比添加额外的标记和代码来处理唯一标识符更容易。