实现点击黄色表头单元格或表头复选框时全选/取消全选所有复选框

修正后的JavaScript代码 #

// 仅绑定黄色表头单元格的点击事件
$('th[bgcolor="yellow"]').click(function(event) {
  const headerCheckbox = $(this).find('input[type="checkbox"]');
  
  // 若点击的是表头单元格而非复选框，先切换表头复选框的状态
  if (!$(event.target).is('input')) {
    headerCheckbox.prop('checked', !headerCheckbox.prop('checked'));
  }
  
  // 将所有.check_all类的复选框状态与表头复选框同步
  $('.check_all').prop('checked', headerCheckbox.prop('checked'));
});

HTML代码（无需修改） #

<style>
  th, td {border:1px solid black;padding:20px;}
</style>

<table>
<tr>
    <th>Header. Nothing should happen will click cell in this column</th>
    <th bgcolor= "yellow"><input id="header" type="checkbox"/></th>
</tr>
<tr>
    <td>Row 1</td>
    <td><input class="check_all" type="checkbox"/></td>
</tr>
<tr>
    <td>Row 2</td>
    <td><input class="check_all" type="checkbox"/></td>
</tr>    
</table>

关键改动说明 #

1. 缩小事件触发范围：只针对黄色表头单元格绑定点击事件，避免其他列的表头/单元格被误触发。
2. 统一状态同步逻辑：不管点击的是表头单元格空白区域还是内部复选框，最终都会将表头复选框的状态同步到所有.check_all复选框，确保全选/取消全选的一致性。
3. 修复单元格点击逻辑：点击表头单元格时，先切换表头复选框的选中状态，再同步下方复选框，解决原代码仅修改当前单元格复选框、未同步其他复选框的问题。

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