我在 html/JS/CSS 中创建了一个经典的待办事项列表应用程序，其中我具有以下功能:
- 用户输入他/她的任务
- 然后在下面打印任务，同一行上有一个复选框
- 任务也存储在带有时间戳的对象中。
- 所有新任务都添加在旧任务之上。
如何仅使用 css 解决以下问题:
当用户选中复选框时，相应行上的任务应该被“划出”，以便清楚地表明它已完成。
我做了一个 jsfiddle，但我不能让它在那里运行，无论如何它在这里:https://jsfiddle.net/fm6cbuu9/2/
到目前为止我有什么:
JS:
var tasks = {}
function addTask(){
var task = document.getElementById("inn").value
var ol = document.getElementById("ol")
var li = document.createElement("li")
var d = new Date()
var box = document.createElement("input")
box.type = "checkbox"
box.id = "box"
li.appendChild(box)
li.appendChild(document.createTextNode(task))
ol.insertBefore(li, ol.childNodes[0])
tasks[d.getTime()] = task
console.log(tasks)
CSS:
input[type=checkbox] + li {
text-decoration: overline;
}
HTML:
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
最佳答案
不是为任务名称创建文本节点，而是将其放在复选框的标签内。然后，您只需在 CSS 中定位选中框旁边的标签即可:
var tasks = {}
window.addTask = function(){
var task = document.getElementById("inn").value;
var ol = document.getElementById("ol");
var li = document.createElement("li");
var d = new Date();
var taskId = d.getTime();
var box = document.createElement("input");
box.type = "checkbox";
box.id = "box-" + taskId;
var label = document.createElement("label");
label.setAttribute("for", "box-" + taskId);
label.innerHTML = task;
li.appendChild(box);
li.appendChild(label);
ol.insertBefore(li, ol.childNodes[0]);
tasks[taskId] = task;
console.log(tasks);
}#container {
display: block;
margin-right: auto;
margin-left: auto;
background-color: lightgray;
border-radius: 10px;
width: 800px;
height: auto;
z-index: 0;
padding: 20px;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
} <title>To do list</title>
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
</body>关于javascript - CSS/JS Checked 复选框应该是 "line out"待办事项列表应用程序中的 <li> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40228152/