Checkbox联动TD背景色：批量勾选按钮无法触发变更的修复需求

问题根源 #

批量勾选时仅修改了Checkbox的checked属性，但未触发change事件，导致绑定的背景色切换逻辑未执行；同时原代码中通过全局TD索引选择目标元素的逻辑存在跨行错误，需修正为基于当前行的TD选择。

修改后的代码 #

EJS 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="views/css/index.css">
    </head>
    <body>
        <form name='formMassCheckIn'>
            <input type='button' value='Check All' onclick='js_select_all(this)'/> 
            <table id="myTable">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                </tr>
                <% for(let a = 0; a < 10; a ++){ %>
                    <tr>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td><input type="checkbox"  name='circSelected'></td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td><input type="checkbox"  name='circSelected'></td>
                    </tr>
                <% } %>
            </table>
        </form>
    </body>
</html>

注：移除了重复的id="first"，避免HTML结构错误。

JavaScript 代码

// 统一处理单个Checkbox对应的TD背景色切换
function updateRowColor(checkbox) {
  const tr = checkbox.closest('tr');
  const tds = tr.querySelectorAll('td');
  // 根据Checkbox在当前行的位置，确定要切换的TD范围
  const checkboxIndex = Array.from(tr.querySelectorAll('input')).indexOf(checkbox);
  
  if (checkboxIndex === 0) {
    // 第5列的Checkbox：切换当前行1-4列TD
    for (let i = 0; i < 4; i++) {
      tds[i].classList.toggle('selected', checkbox.checked);
    }
  } else {
    // 第10列的Checkbox：切换当前行6-9列TD
    for (let i = 5; i < 9; i++) {
      tds[i].classList.toggle('selected', checkbox.checked);
    }
  }
}

// 批量勾选/取消勾选函数
function js_select_all(btn) {
  const checkboxes = document.formMassCheckIn.circSelected;
  const isCheckAll = btn.value === "Check All";
  
  checkboxes.forEach(checkbox => {
    checkbox.checked = isCheckAll;
    updateRowColor(checkbox); // 批量操作时同步触发背景色切换
  });
  
  btn.value = isCheckAll ? "Uncheck All" : "Check All";
}

// 绑定单个Checkbox的change事件
document.querySelectorAll('#myTable input').forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    updateRowColor(checkbox);
  });
});

CSS 代码

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    width: 10%;
}

td {
    text-align: center;
    border: 1px solid black;
}

.selected {
    background: red;
}

关键修改点 #

1. 抽离updateRowColor函数，统一处理单个Checkbox对应的TD背景色切换逻辑，避免重复代码。
2. 批量勾选时，修改checked属性后直接调用updateRowColor，确保背景色同步变更。
3. 修正TD选择逻辑：基于当前行的DOM结构定位目标TD，避免跨行错误。
4. 移除重复ID，修复HTML结构问题。

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