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

Checkbox stops working after triggered manually

本文关键字：停止工作 复选框      更新时间：2023-09-26

我写了这个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>

你可以比你的方法更简单地完成它，就像这样：

处理全选复选框： （只会选中/取消选中行中的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');
    }
});

Handling点击tr:（我们也可以使用toggleClass而不是add/remove class）

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

现在请参阅JsFiddle DEMO，我希望它对您有效，谢谢

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

$（'body'）.on（'change'，'.select all children'，函数（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');
        //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);
        }
    });

谢谢。

相关文章：