Question

我使用此功能点击了表格行

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

并且它工作正常，但是当我尝试单击复选框self时，它不起作用。我该怎么办才能使它们都有效？

Answer 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/

Answer 2

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

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

Answer 3

更好的是，你可以使用简单的HTML，在for

中写下label属性

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

注意：id的{{1}}将<input type="checkbox"

中的for属性值

DEMO

Answer 4

这些答案一切正常，但我被困了很长时间才想弄清楚为什么我无法让他们上班。我正在动态生成表格行，但它们还没有存在于DOM中。因此，没有一种解决方案有效。

为我解决这个问题的方法是使用Typeclassopedia方法。

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

Answer 5

试试这个

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

Clickable Row＆amp;复选框冲突

5 个答案:

DEMO