jQuery实现点击表格行高亮同步复选框状态的事件冒泡问题怎么解决

问题根源 #

异常由两个原因共同导致：

1. 事件冒泡冲突：复选框是<tr>的子元素，点击复选框时，点击事件会从子元素向上传递到父级<tr>，先后触发复选框、行两个点击事件，相当于连续两次切换选中状态，导致状态异常。
2. 选中状态设置方法错误：attr()操作的是HTML标签的静态属性，无法实时更新复选框的动态选中状态，应该用prop()方法操作。

修复后的代码 #

JS代码 #

$('.form-check-input').on('click', function(e) {
  // 阻止事件冒泡到父级tr，避免重复触发
  e.stopPropagation();
  $(this).closest("tr").toggleClass("rowColor", $(this).is(':checked'));
});

$('#table1 tbody tr').on('click', function() {
  const checkBox = $(this).find(".form-check-input");
  // 切换选中状态，使用prop操作实时状态
  const newState = !checkBox.is(':checked');
  checkBox.prop("checked", newState);
  $(this).toggleClass("rowColor", newState);
});

CSS（无需修改） #

.rowColor {
  background-color: #dfecf6;
}

HTML注意点 #

原有代码末尾的<table>需要修正为闭合标签</table>，避免DOM结构异常。

内容的提问来源于stack exchange，提问作者Mohamed