可点击行和复选框冲突答案

【问题标题】：Clickable Row & Checkbox conflict可点击行和复选框冲突
【发布时间】：2011-04-18 10:07:18
【问题描述】：

我使用此功能使我的表格行可点击

    $("#grid tbody tr").click(function () {
    var $checkbox = $(this).find(':checkbox');
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

它工作正常，但是当我尝试单击复选框自身时，它不起作用。我应该怎么做才能使它们都起作用？

【问题讨论】：

我尝试单击复选框自我？？？意思是
为什么要覆盖默认浏览器功能？？
他想让点击行切换复选框。基本上就像一个巨大的标签。

标签： jquery checkbox clickable

【解决方案1】：

使用单个事件处理程序：

$("#grid tbody tr").click(function(e) {
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
    } else {
        var $checkbox = $(this).find(':checkbox');
        $checkbox.attr('checked', !$checkbox.attr('checked'));
    }
});

http://jsfiddle.net/karim79/UX2Fv/

【讨论】：

是否可以始终选中 1 个复选框？我不想切换最后一个复选框 http://jsfiddle.net/uPqXf/
完美！非常感谢

【解决方案2】：

$('#grid tbody tr input:checkbox').click(function(e) {
    e.stopPropagation();
});

然后点击复选框不会触发tr上的点击事件。

【讨论】：

是否可以始终选中 1 个复选框？我不想切换最后一个复选框 http://jsfiddle.net/uPqXf/

【解决方案3】：

你可以用简单的 HTML 更好地做到这一点，在 label 中写入 for 属性

<input type="checkbox" id="myCheck"><label for="myCheck">CheckThis</label>
                              ^                   ^

注意：<input type="checkbox" 中的id 将是<label> 中for 属性的值

DEMO

【讨论】：

如何将^ 放在文本下方？？
@experimentX 简单：SHIFT+6
hmmm 也很实用也很简单
这不会使整行可点击，只有标签文本。

【解决方案4】：

这些答案都可以正常工作，但我被困了很长时间，试图弄清楚为什么我无法让它们工作。我正在动态生成我的表格行，但它们在 DOM 上还不存在。因此，所有解决方案都不起作用。

为我解决这个问题的方法是使用on() 方法。

$('body').on('click', '#grid tbody  tr', function (e) {

【讨论】：

【解决方案5】：

试试这个

$('#grid tbody tr input:checked').click(function(e) {
    e.stopPropagation();
});

【讨论】：