Question

由于我之前没有发现任何问题，关于如何在点击表格行时切换复选框，所以我想分享我的方法......

Answer 1

为了选择表格中某一行的复选框，我们首先会检查我们所定位的元素的type attribute是否不是复选框，如果它不是我们检查的checbox所有复选框都嵌套在该表格行中。

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

Demo

如果您要突出checkbox checked上的表格行，我们可以使用if is(":checked")条件，如果是，我们会找到最接近的{{1}使用tr并使用.closest()

向我们添加类的元素

addClass()

Demo

Answer 2

这个问题对我很有用，但我之前的解决方案存在问题。如果单击表格单元格中的链接，则会触发复选框切换。我用谷歌搜索了这个，我看到了一个在表格的链接上添加event.stopPropagation()的命题，如下所示：

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

这个解决方案是个坏主意，因为我在表的链接上有一些jquery bootstrap popover ...

所以这里有一个更适合我的解决方案。顺便说一下，当我使用bootstrap 2.3时，该行的亮点是通过将“info”类添加到tr。要使用此代码，您只需将class="selectable"添加到表格标记。

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

您可能希望对测试条件更具体，例如，如果行中有其他输入。

Answer 3

像上面提供的许多解决方案一样触发点击将导致该功能运行两次。改为改变道具值：

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

Link to jsfiddle example here

Answer 4

您可以直接触发此点击事件...... :)

  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

OR

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

Answer 5

即使被接受的@Mr。 Alien的答案效果很好，如果您决定在某些时候使用jQuery动态添加新的<tr>行，它就不起作用。

我建议使用事件委派方法，这只是对已接受答案的略微修改。

而不是：

... $('.record_table tr').click(function(event) { ...

使用

... $('.record_table').on('click', 'tr', function(event) { ...

突出显示相同，使用：

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

此处有更多信息：Click event doesn't fire for table rows added dynamically

单击表行以使用jQuery选择复选框

5 个答案: