Express+EJS待办应用问题：勾选复选框时文本无法添加删除线

问题根源分析 #

你的代码存在三个核心问题导致功能失效：

1. 样式属性错误：需求是给完成的任务加删除线，但你代码里设置的是webkitTextStroke文字描边属性，完全偏离需求。
2. 元素对应关系混乱：EJS用倒序循环生成任务项，但JS通过getElementsByName按DOM顺序获取元素后直接按索引匹配，循环顺序变化时，复选框和任务文本的对应关系会出错。
3. 冗余遍历逻辑：每次点击复选框都遍历所有元素，既低效又容易引发匹配错误。

修复后的代码 #

修改EJS模板（优化结构，避免重复ID）

<% for(var i = listItems2.length -1; i >= 0; i--){ %>
  <div class="task-item flex">
    <input type="checkbox" name="checker" class="h-7 w-7 m-3 flex-shrink-0">
    <p class="text-[32px] font-[200]"><%= listItems2[i] %></p>
  </div>
<% } %>

• 给任务容器添加task-item类，方便后续DOM精准查找
• 移除重复的id="checkbox_id"，符合HTML规范

修改JavaScript代码（精准匹配+正确样式）

<script>
  // 获取所有复选框元素
  const checkboxes = document.querySelectorAll('input[name="checker"]');
  
  // 给每个复选框绑定change事件
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      // 找到当前复选框所在任务容器内的文本标签
      const taskText = this.parentElement.querySelector('p');
      if (this.checked) {
        // 添加删除线样式
        taskText.style.textDecoration = 'line-through';
      } else {
        // 移除删除线样式
        taskText.style.textDecoration = 'none';
      }
    });
  });
</script>

• 使用querySelectorAll更灵活的选择器获取元素
• 点击事件中通过this.parentElement精准定位当前任务的文本，彻底避免索引匹配错误
• 改用textDecoration: line-through实现需求的删除线效果

额外优化建议 #

如果希望样式更易维护，可以把删除线样式写到CSS类里，通过添加/移除类来控制：

.completed-task {
  text-decoration: line-through;
  opacity: 0.7; /* 可选：添加半透明效果增强视觉区分 */
}

然后JS代码简化为：

taskText.classList.toggle('completed-task', this.checked);

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