jquery - 通过单击其父元素来切换复选框的状态

Question

我的表格单元格内有一个复选框，我想在单击单元格时检查它(不仅仅是当我单击复选框时)。

我正在使用此代码:

$('.check_it').click( function () {
    if ($(this).find('.my_checkbox_class').is(':checked')) {
        $(this).find('.my_checkbox_class').removeAttr('checked');
        checked_counter--;
    }
    else {
        $(this).find('.my_checkbox_class').attr('checked', 'checked');
        checked_counter++;
    }
});

它工作正常，但是当我单击复选框时，此事件也会被触发，并且我的 checked_counter 变量得到错误的值 - 有人可以告诉我如何修复它吗？ 我想通过单击复选框并单击它的表格单元格来检查复选框。

编辑，这是我的 html:

<td class="check_it"><input type="checkbox" class="my_checkbox_class" /></td>

Answer 1

$('.my_checkbox_class').click(function(ev){
    ev.stopPropagation();
});

应该可以解决问题。这会阻止事件冒泡，因此它不会到达 td，并且只会执行复选框默认行为。