选中复选框时删除文本

Question

我正在尝试使用express和EJS作为中间件制作一个待办事项列表应用程序。它应该有一个任务列表，每个已添加的任务旁边都有一个复选框。任务完成后，您可以选中该复选框，文本将被划线，表示任务已完成。我在 .ejs 文件末尾添加了 javascript，但它存在一些问题并且无法正常工作

这是EJS代码片段

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

和 JavaScript 代码

<script>
  function updateStyle() {
  for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].checked) {
      paras[i].style.webkitTextStroke = "1px black"; 
      paras[i].style.textStroke = "1px black";       
    } else {
      paras[i].style.webkitTextStroke = "none";      
      paras[i].style.textStroke = "none";
    }
  }
}


for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("change", updateStyle);
}
</script>

Answer 1

添加类或设置标签样式，以便在选中复选框时为其添加删除线样式。

使用

::before

和

::after

内容元素提供该项目是受打击文本的上下文。

label {
  color: black;
}

#todo {
  accent-color: #777
}

#todo:checked+label {
  color: #777;
  text-decoration: line-through;
  &::before,
  &::after {
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect 1px, 1px, 1px, 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  &::before {
    content: "[start of stricken text]";
  }
  &::after {
    content: "[end of stricken text]";
  }
}

<input type="checkbox" id="todo">
<label for="todo">Todo Item</label>