Контекст Row и Checkbox с возможностью кликов

Я сделал свою строку таблицы нажатой с помощью этой функции

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

и он отлично работает, однако, когда я пытаюсь щелкнуть флажок self, он не работает. Что я должен сделать, чтобы оба они работали?

Ответ 1

Использование одного обработчика событий:

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

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

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

Ответ 2

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

Тогда нажатие на флажок не вызывает событие щелчка на tr.

Ответ 3

лучше u может сделать это с помощью простого HTML, записать атрибут for в label

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

Примечание: id of <input type="checkbox" будет значением атрибута for в <label>

DEMO

Ответ 4

Эти ответы все отлично работают, но я долго задерживался, пытаясь понять, почему я не мог заставить их работать. Я динамически генерировал свои таблицы, и они еще не существовали в DOM. По этой причине ни одно из решений не работало.

Для меня это решило использовать метод on().

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

Ответ 5

Попробуйте это

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