当Checkbox切换为Checked状态时，用纯JavaScript为表格行文本加删除线

没问题，我帮你搞定这个需求！要实现复选框选中时给所在表格行添加删除线，其实核心就是监听复选框的状态变化，然后操作它所在的<tr>元素样式。我给你两种常用的实现方案，你可以根据自己的技术栈选择：

第一步：先准备基础的HTML和CSS #

首先我们搭好表格结构，再定义删除线的样式类：

<table>
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>整理项目文档</td>
    <td>2024-05-20</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>修复登录页面bug</td>
    <td>2024-05-21</td>
  </tr>
</table>

/* 定义删除线样式，可选加灰色让已完成项更直观 */
.strikethrough {
  text-decoration: line-through;
  color: #888;
}

第二步：用原生JavaScript实现逻辑 #

这是最通用的方案，不用依赖任何库：

// 等DOM加载完成再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带指定类名的复选框
  const checkboxes = document.querySelectorAll('.row-checkbox');
  
  // 给每个复选框绑定状态变化事件
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      // 找到当前复选框所在的最近表格行
      const targetRow = this.closest('tr');
      // 根据复选框的选中状态，切换删除线样式类
      targetRow.classList.toggle('strikethrough', this.checked);
    });
  });
});

如果你在用jQuery，可以用这个简化版 #

如果你的项目已经引入了jQuery，代码可以更简洁：

$(document).ready(function() {
  $('.row-checkbox').on('change', function() {
    $(this).closest('tr').toggleClass('strikethrough', $(this).is(':checked'));
  });
});

可能的问题排查 #

如果你的原有代码没生效，大概率是这几个原因：

• 代码执行时机不对：DOM还没加载完就去获取元素，导致找不到复选框
• 没正确定位到表格行：比如用了parent()而不是closest('tr')，如果DOM结构嵌套深的话parent()可能找不到正确的tr
• 样式类名写错：确保CSS里的类名和JS里操作的类名完全一致

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