可点击行和复选框冲突

Question

我用这个函数使我的表行可点击

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

，它工作得很好，然而，当我试图点击复选框自我，它不工作。我该怎么做才能使两者都起作用呢?

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来做到这一点，在label中写入for属性

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

注: <input type="checkbox"的id为<label>中for属性的值

演示

Answer 4

这些答案都很好，但是我花了很长时间试图弄清楚为什么我不能让它们工作。我正在动态生成我的表行，它们还不存在于DOM上。由于这个原因，所有的解决方案都不起作用。

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

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

Answer 5

试试这个

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