1

我有一个表格，其中每一行在<input type="checkbox" />第一个单元格中都有一个。

我有一个点击处理程序设置，<tr>其中包括切换复选框。

这是完美的，除非我点击实际的复选框，这会导致复选框的状态与它应该的状态相反，因为它被切换两次，一次是默认行为，一次是<tr>事件处理程序。

我想要做的基本上是忽略复选框点击，只响应点击tr。

这是我的 tr 事件处理程序

$('.files-table tbody').on('click', 'tr', function (e) {
    var check = $('.check', this);
    check.prop('checked', !check.prop('checked'));

    check.prop('checked') ? selected++ : selected--;
    numSelected.html(selected + ' item' + (selected === 1 ? ' ' : 's ' ) + 'selected: ');
    if (selected == 1) {
        withSelected.addClass('in').removeClass('hide');
        noSelected.removeClass('in').addClass('hide');
    } else if (selected == 0) {
        withSelected.removeClass('in').addClass('hide');
        noSelected.addClass('in').removeClass('hide');
    }

    if (check.prop('checked')) {
        selectedItems[check.data('type')].push(check.data('id')+"");
    } else {
        selectedItems[check.data('type')].splice(check.data('id')+"");
    }
    console.log(selectedItems);
    $(this).toggleClass('info');
});

这是一个示例行：

<tr>
    <td style="width:15px;">
      <input class="check" type="checkbox" data-id="6" data-type="directories">
    </td>
    <td>
      <a href="/files/browse/1. First/1.1 First Child of First/6" 
         class="needs-tooltip" 
         title="Browse Directory">
        <i class="icon icon-folder-close"></i>
      </a> 
      1.1 First Child of First
    </td>
    <td>Directory</td>
    <td>0 Items</td>
    <td>27 Jan 2013</td>
    <td>--</td>
    <td>--</td>
</tr>
4

2 回答 2

2

您可以检查点击的来源：

if ( ! $(e.target).is(':checkbox') ) {
    $('.check', this).prop('checked', function (i, el) {
        el.checked ? selected-- : selected++;
        return ! el.checked;
    });
}
于 2013-01-28T03:26:20.767 回答
1

防止将您的事件传播给父母：

$(".check").on('click', function (e) {
   e.stopPropagation();
});

这将允许复选框（切换选中状态）的正常行为继续进行，但您的点击事件不会让父级再次点击。

于 2013-01-28T03:25:39.353 回答