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

我编写了这个jQuery代码片段来处理

tr

click，向其中添加一个引导类，然后单击其中的第一个

复选框

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

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

$（'body'）。在（'change'，'上。选择所有子项'，函数（e）{
var 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');

        //Old code commented:
        //checkbox.click();

        //Modified Code:
        checked.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:（我们也可以使用
切换类
，而不是
添加/删除类
）

现在看，我希望它对您有用，谢谢。
不起作用。在这种情况下，您不能对未定义的对象调用函数-
已选中。
$('.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');
    }
});

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