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，只会执行复选框默认行为。

Answer 2

Click事件沿DOM树向上传播到父元素。当您单击复选框时，它也会触发<td>上的事件。你可以通过在复选框中捕获事件并在那里停止传播来解决这个问题（这会增加第二个事件处理程序，并且还可能会破坏依赖于事件冒泡的其他功能）。

我建议使用另一种方法，即在同一个处理程序中进行切换之前检查事件的来源。这样可以使用jQuery event object的target属性。

$('td').click(function(e)
{
    if ( $(e.target).is('[type="checkbox"]') ) return;

    var $chkBox = $(this).find('.my_checkbox_class');
    var state = $chkBox.is(':checked');
    checked_counter += (state ? -1 : 1);
    $chkBox.prop('checked', !state);
});

注意，我还重构了您的原始点击处理程序，因为您所做的只是切换复选框的状态（您应该使用prop）。这个替换你当前的处理程序，它不是。

Answer 3

使用$(".my_checkbox_class").click(function() {}

根据您的代码$('check_it').click(function() {}，这可能包含复选框和行详细信息，以便此函数调用这两种情况都会导致错误行为。

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

3 个答案: