Флажок не меняется при нажатии прямо на него

Question

У меня есть таблица данных и один флажок на строку, чтобы пользователь мог выбрать элемент.

Я использую следующий код jQuery, чтобы позволить пользователю выбрать элемент, щелкнув в любом месте строки:

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

Проблема в том, что, если я нажимаю прямо на флажок, ничего не происходит. то есть. если флажок не установлен, он остается непроверенным. Если я щелкну где-нибудь еще в строке, флажок изменит статус.

Я думаю, что код jQuery вызывает выполнение действия дважды. Если я нажму на флажок, флажок изменится, но затем будет выполнен код jQuery для щелчка по строке, и флажок будет изменен обратно. Не уверен, что это действительно происходит, но это мое предположение.

Как я могу установить флажок, если пользователь нажимает на строку, и то же самое, если он нажимает непосредственно на флажок?

Answer 1

Проверьте, какой элемент нажимается, проверив информацию о событии. Тогда, если это флажок, не запускайте код. В противном случае переключите отмеченный атрибут

$("tbody tr").click(function(e) {
        e = e || event;
        var isCheckbox = $(e.target).is(":checkbox");
        if (!isCheckbox) {
            var checkbox = $(this).find(':checkbox');
            checkbox.attr('checked', !checkbox.attr('checked'));
        }
});

Answer 2

Tt, потому что флажок находится в tbody tr. Если вы пройдете по коду, вы заметите, что он был проверен, но затем не отмечен вашей функцией щелчка. измените функцию щелчка, чтобы исключить тд, который содержит флажок.

$("tbody tr td").click(function() { 
    if ($("input:checkbox", $(this)).length) {
       //td contains check box  do nothing
    } else {
      var checkbox = $(this).find(':checkbox'); 
      checkbox.attr('checked', !checkbox.attr('checked')); 
    }
}); 

Answer 3

Если проблема заключается в том, что событие фактически запускается дважды (и это выглядит как справедливое предположение), то вам следует попробовать использовать методы событий event.preventDefault() и event.stopPropagation(). Они должны помешать событию достичь самого флажка.

Answer 4

Вы ловите событие щелчка в строке. Если флажок находится в пределах TR, то событие срабатывает, и вы инвертируете атрибут «checked». Одним из решений было бы разместить событие на каждом TD внутри TR, за исключением TD, содержащего флажок.