复选框选中时如何用jQuery修改所有带rowspan的关联tr背景色

你的原有代码仅修改了复选框所在的当前行背景色，没有覆盖rowspan关联的其他行，因此无法实现联动变色效果。可通过预分组标记的方式实现需求，修改后的代码如下：

$(document).ready(function(){
  // 预给同rowspan组的行标记相同分组ID
  let groupId = 0;
  $('.test-table-list tr').each(function(){
    const $firstTd = $(this).find('td:first');
    if($firstTd.attr('rowspan')){
      groupId++;
      const rowspan = parseInt($firstTd.attr('rowspan'));
      // 当前行+后续rowspan-1行归为同一分组
      $(this).attr('data-group', groupId)
             .nextAll()
             .slice(0, rowspan - 1)
             .attr('data-group', groupId);
    }
  });

  // 复选框点击事件
  $('.test-table-list input[type="checkbox"]').on('click', function(){
    const currentGroup = $(this).closest('tr').data('group');
    const $relatedRows = $(`.test-table-list tr[data-group="${currentGroup}"]`);
    if($(this).is(':checked')){
      $relatedRows.css('background', 'yellow');
    }else{
      $relatedRows.css('background', '#fff');
    }
  });
});

实现逻辑说明 #

• 页面加载完成后先遍历所有表格行，为属于同一rowspan分组的行打上相同的data-group自定义属性，避免每次点击都重新计算关联行，运行效率更高
• 点击复选框时，直接通过分组ID匹配所有关联行，批量修改背景色即可完成联动效果

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