2

我在表格单元格中有一个复选框，当我点击我的单元格时我想检查它（不仅仅是当我点击复选框时）。

我正在使用这段代码：

$('.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>
4

3 回答 3

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

应该做的伎俩。这会阻止事件冒泡，因此它不会到达 td，并且只会执行复选框默认行为。

于 2013-02-06T10:22:36.797 回答
2

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

我推荐的另一种方法是在同一个处理程序中进行切换之前检查事件的来源。这利用了jQuery 事件对象的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）。这将替换您当前的处理程序，它不是除了 is。

于 2013-02-06T10:24:07.183 回答
0

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

根据您的代码，$('check_it').click(function() {}这可能具有 chechbox 以及行详细信息，因此此函数在两种情况下都调用，这会导致扭曲行为。

于 2013-02-06T10:21:46.577 回答