勾选td内checkbox时如何为其添加背景色，且避免多行列代码重复

核心优化思路 #

• 采用事件委托监听表格根节点的事件，后续新增行无需额外绑定事件，也不需要新增专属类名，只要保持原有类名规则即可
• 移除重复的事件绑定逻辑，避免内存泄漏
• 所有状态判断和样式切换逻辑统一收敛，禁用状态的checkbox会自动跳过背景设置

JS代码 #

// 直接监听整个表格的事件，新增行自动生效
const accessTable = document.querySelector('.access-table');

// 页面初始化：默认所有子checkbox禁用
document.querySelectorAll('.car-park-check').forEach(check => check.disabled = true);

// 统一监听表格内的change事件
accessTable.addEventListener('change', e => {
  const target = e.target;
  // 判断点击的是主checkbox
  if (target.classList.contains('car-park-check-main')) {
    // 获取当前行所有子checkbox
    const row = target.closest('tr');
    const subChecks = row.querySelectorAll('.car-park-check');
    subChecks.forEach(check => {
      check.disabled = !target.checked;
      // 主checkbox取消勾选时，清空子checkbox的选中状态和对应背景
      if (!target.checked) {
        check.checked = false;
        check.closest('td').classList.remove('td-active');
      }
    });
    // 主checkbox自身td的背景切换
    target.closest('td').classList.toggle('td-active', target.checked);
    return;
  }
  // 判断点击的是子checkbox
  if (target.classList.contains('car-park-check')) {
    // 禁用状态直接跳过
    if (target.disabled) return;
    // 切换对应td的背景
    target.closest('td').classList.toggle('td-active', target.checked);
    return;
  }
});

// 支持点击td直接切换checkbox状态
accessTable.addEventListener('click', e => {
  const td = e.target.closest('.access-td');
  if (td && !e.target.classList.contains('access-table-input')) {
    const check = td.querySelector('.access-table-input');
    if (check && !check.disabled) check.click();
  }
});

CSS代码（和原有逻辑一致，可复用） #

.td-active {
  background-color: rgb(95, 241, 95) !important;
}

HTML代码（无需调整结构，新增行只要保持类名规则即可） #

<table class="table table-bordered access-table">
  <tbody>
    <tr>
      <th scope="row" style="font-weight: 300;">Checkboxes</th>
      <td class="main-td access-td one">
        <label>
          <input type="checkbox" class="access-table-input car-park-check-main"> main checkbox
        </label>
      </td>
      <td class="base-td access-td two">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td four">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td five">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td six">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
    </tr>
    <!-- 后续新增行只要复制上面tr的结构，类名保持一致即可，不需要额外写JS逻辑 -->
  </tbody>
</table>

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