如何使用复选框来装饰文本？

Question

我正在尝试使用 Javascript 构建一个待办事项应用程序，现在我正在尝试弄清楚如何使用复选框删除待办事项并将其撤消。我已经尝试通过按钮实现同样的效果，当我点击按钮时，文本被删除了，但我不知道如何撤消它。

function newToDo() {
    if (document.getElementById("input_todo").value == "") {
        confirm("Bitte füllen sie es aus.")
    } else {
        var newLi = document.createElement("LI");
        newLi.id = "itemLi";
        newLi.innerHTML = document.getElementById("input_todo").value;
        var allTodos = document.getElementById("allTodos");
        var checkBox = document.createElement("INPUT");
        checkBox.id = "checkBox";
        checkBox.type = "checkbox";
        var buttonDel = document.createElement("BUTTON");
        buttonDel.id = "buttonDel";
        buttonDel.setAttribute('onclick', "delToDo()");


        allTodos.appendChild(newLi);
        newLi.appendChild(checkBox);
        newLi.appendChild(buttonDel);
        document.getElementById("input_todo").value = "";

        if (checkBox.checked == "true") {
            document.getElementById("itemLi").style.textDecoration = "line-through";
        } else {
            document.getElementById("itemLi").style.textDecoration = "none";
        }
    }    
}
function delToDo() {
    allTodos.removeChild(itemLi);
}

#input_todo {
    width: 500px;
    height: 24px;
    font-size: 16px;
}
#but_todo {
    width: 100px;
    height: 30px;
}
#itemDiv {
    border: 1px solid black;
}
#buttonJa {
    width: 50px;
    height: 25px;
}
#buttonDel {
    width: 50px;
    height: 25px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="todo.css" media="screen">
        <title>To-Do</title>
    </head>
    <body>
        <h1>To-Do Liste</h1>
        <input id="input_todo" type="text">
        <button id="but_todo" onclick="newToDo()">Create To-Do</button>
        <ul id="allTodos">

        </ul>
        <script language="javascript" type="text/javascript" src="todo.js"></script>
    </body>
</html>

Answer 1

如果您想设置复选框之类的样式，请使用 <label> 元素。当连接到具有 for 属性的输入时，可以单击它来选中或取消选中输入。所有其他输入元素和标签组合也是如此。

在造型方面，只需诉诸 CSS。 :checked 输入的伪选择器可以检查输入是否被选中并相应地更改样式。

如果您要创建元素并将它们附加到文档中，则不要使用 id 属性，而应使用类。 ID 必须是唯一的，否则它们是无用的。

ul {
  padding: 0;
  list-style: none;
}

li {
  margin: 15px 0;
}

input[type="checkbox"] {
  display: none;
}

label {
  display: block;
  position: relative;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #f0f0f0;
  background-color: #f7f7f7;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-family: sans-serif;
  color: #333333;
  transition: 100ms ease-in-out;
  transition-property: box-shadow, transform;
}

label:hover {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.25);
  transform: translate3d(0, -2px, 0);
}

label::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: calc(100% + 10px);
  left: -5px;
  top: 50%;
  transform: translate(0, -50%) scaleX(0);
  transform-origin: left center;
  background-color: red;
  transition: transform 250ms ease-in-out;
}

input[type="checkbox"]:checked + label::after {
  transform: translate(0, -50%);
}

<form>
  <ul>
    <li>
      <input id="task-1" type="checkbox" name="task" value="done">
      <label for="task-1">Task that I have to do</label>
    </li>
    <li>
      <input id="task-2" type="checkbox" name="task" value="done">
      <label for="task-2">Another task that I have to do</label>
    </li>
  </ul>
</form>

如何使用复选框来装饰文本？

How do I use a checkbox to decorate texts?

javascript

checkbox

checked