EJS无限待办列表 如何实现复选框选中自动应用样式

你不需要硬编码每个待办项的id样式，通过CSS关系选择器就能匹配任意数量的待办项选中效果，另外你现有HTML结构存在语法问题，先做结构修正再替换样式即可。 #

1. 修正EJS模板结构 #

现有代码中<ul>直接嵌套<input>、<label>标签，<label>内部包裹<li>是不符合HTML规范的：列表的直接子元素只能是<li>，调整后结构如下，保留原有label和checkbox的关联逻辑保证点击文字可勾选，同时给复选框加统一类名方便样式匹配：

<body>
<h1><%- dayType %></h1>
<ul class="tasks">
    <% for(i = 0 ; i < data.length ; i++){ %>
        <li class="todo-item">
            <input class="todo-check" id='label-<%-i+1%>' type='checkbox'/>
            <label for="label-<%-i+1%>"><%- data[i] %></label>
        </li>
    <% } %>
    <li>
        <form action="/" method="post">
            <input type="text" placeholder="Enter To Do Item" name="items">
            <input type="submit" value="Submit">
        </form>
    </li>
</ul>
</body>

2. 替换原有硬编码CSS #

使用CSS相邻兄弟选择器+，匹配所有处于勾选状态的复选框后面紧邻的label标签，无论有多少条待办项，样式都会自动生效，不需要新增任何CSS规则：

.todo-check:checked + label {
  background: #6d335c;
  border-bottom: 1px solid #34495E;
  color: #d37b79;
  /* 可选：已完成项加删除线效果 */
  text-decoration: line-through;
}

可选兜底方案（不推荐） #

如果你暂时不想调整原有HTML结构，可以用CSS属性前缀选择器，匹配所有id以label-开头的复选框，也能实现任意数量的样式匹配，但不符合规范的结构可能引发未知的渲染问题：

input[id^="label-"]:checked + label {
  background: #6d335c;
  border-bottom: 1px solid #34495E;
  color: #d37b79;
}

原理说明 #

• 原写法依赖id一对一匹配元素，每新增一个待办项就要新增一条CSS规则，灵活性极差。
• 相邻兄弟选择器+会自动匹配「紧接在指定元素后、共享同一个父元素」的目标元素，因为所有待办项的DOM结构完全一致，所以只需要一条规则就能覆盖所有场景，和待办项数量无关。

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