Question

我已经编写了这个jQuery代码段来处理tr点击，为它添加一个引导类并单击其中的第一个checkbox。

$('body').on('change', '.select-all-children', function(e) {
  var checked = this.checked;

  $('.select-child').each(function() {
    $(this).prop('checked', checked);

    if(checked) {
      $(this).parent().parent().addClass('warning');
    } else {
      $(this).parent().parent().removeClass('warning');
    }
  });

});

$('body').on('click', '.table-selectable tbody tr', function(e) {
  var checkbox = $(this).find('.select-child');

  checkbox.click();

  var checked = checkbox[0].checked;

  if(checked) {
    $(this).addClass('warning');
  } else {
    $(this).removeClass('warning');
  }
});

$('body').on('change', '.select-child', function(e) {
  var checked_total = $('.select-child:checked').length;

  if(checked_total == $('.select-child').length) {
    $('.select-all-children').prop('checked', true);
  } else {
    $('.select-all-children').prop('checked', false);
  }
});

每当我点击tr并因此触发此呼叫时：

checkbox.click();

我无法再单击该复选框，但tr点击工作正常。

这是我的表格的HTML标记：

<table class="table table-selectable">
  <thead>
    <tr>
      <th>
        <input type="checkbox" class="select-all-children">
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>
        <td>
          <input type="checkbox" class="select-child">
        </td>
      </tr>
    </tr>
  </tbody>
</table>

Answer 1

你可以比你的方法做得更简单，就像这样：

处理全选复选框： （只会检查/取消选中行中的FIRST复选框，并将warning类添加到选定的行）。

$('.select-all-children').click(function (e) {
    $(this).closest('table').find('tr td:first-child input:checkbox').prop('checked', this.checked);

    if (this.checked){
        $(this).closest('table').find('tbody tr').addClass('warning');
    } else {
        $(this).closest('table').find('tbody tr').removeClass('warning');
    }
});

处理对tr： 的点击（我们也可以使用toggleClass代替add/remove class）。 < / p>

$('.table-selectable tbody tr td:first-child input:checkbox').on('click', function(e) {
    $(this).closest('tr').toggleClass('warning');
});

现在看JsFiddle DEMO，我希望它适合你，谢谢。

Answer 2

我已经更改了这样的代码，复选框工作正常。请查看带有注释的JQuery代码更改。

$（'body'）。on（'change'，'。select-all-children'，function（e）{ var checked = this.checked;

Thread.sleep(1000)

谢谢。

手动触发后，复选框停止工作

2 个答案: