点击复选框后为指定行下一列添加样式（addClass）失效问题求助

你遇到的问题很典型——$("td")是全局选择器，会选中页面上所有的<td>元素，所以样式才会被加到每一行的td里。要解决这个问题，关键是缩小选择范围，只针对当前复选框所在行的目标td，具体修改步骤如下：

核心思路 #

1. 先定位到触发事件的复选框本身（用$(this)）
2. 找到这个复选框所在的表格行（<tr>）
3. 在该行内精准定位你要添加样式的那个<td>

修改后的代码片段 #

$(document).on('change', '#checkIDGrid', function() { 
  alert("I am inside change"); 
  // 1. 获取当前复选框所在的行
  const currentRow = $(this).closest('tr');
  // 2. 定位该行内的目标td：这里假设是复选框所在列的下一个td，你可以根据表格结构调整
  const targetTd = $(this).parent('td').next('td');
  
  if (this.checked) { 
    var returnVal = confirm("Are you sure?"); 
    $(this).prop("checked", returnVal);
    // 确认选中后，给目标td加样式
    if(returnVal) {
      targetTd.addClass("timeGrad1");
    }
  } else {
    // 取消选中时移除样式（可选，根据需求调整）
    targetTd.removeClass("timeGrad1");
  }
});

关键细节说明 #

• $(this).closest('tr')：从当前复选框元素向上查找最近的<tr>父元素，精准锁定当前行
• $(this).parent('td').next('td')：先找到复选框所在的<td>，再选中它的下一个兄弟<td>——如果你的目标td不是下一个，而是固定列（比如第3列），可以改成currentRow.find('td:eq(2)')（注意eq索引从0开始）
• 新增了取消选中时移除样式的逻辑，避免样式残留，你可以根据实际需求决定是否保留

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