Question

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>To-do App</title>
</head>
<body>
    <div class="row">
        <div class="col-md-6 col-md-offset-1">
            <h1>Tasks</h1><br>

            <ul id="myList">

            </ul>

            <input type="text" id="myText"><br><br>
            <button onclick="addTask()">Add task</button>
        </div>
    </div>
<script>
var x=1;
function addTask() {
    var liNode = document.createElement("LI");    // create a <li> node
    var myTask=document.getElementById("myText").value;    //store the value of input string
    if (myTask!="")
        {

        var cb = document.createElement("INPUT");    //create an input element
        cb.type="checkbox";
        cb.id=x;

        liNode.appendChild(cb);    //append the checkbox to <li>

        var text = document.createTextNode(" "+myTask);    //create the text node after the checkbox
        liNode.appendChild(text);    //append the text node to the <li>

        document.getElementById("myList").appendChild(liNode);    //append the <li> to the <ul> with id="myList"

        document.getElementById("myText").value=null;
        x++;
        }
}
</script>
</body>
</html>

当我检查它们时，我希望对应于复选框的文本进行某些修改（如直通以显示任务已完成）。请仅使用纯JavaScript提供解决方案。

Answer 1

现在让我们了解一下，首先我们有这段代码：

 document.getElementById(YourCheckBoxIDHere).innerHTML = "<s>"+ document.getElementById(YourCheckBoxIDHere).innerHTML +"</s>"

上面的代码添加了通过，但我们如何让它在检查时工作？

我们只需在创建复选框后将代码放在此处：

document.getElementById(x).addEventListener("change", CrossMeOut);

宣布你的职能：

function myFunction(x) {
    x.innerHTML = "<s>"+ x.innerHTML +"</s>
}

当然，在将代码专门应用到代码中时，可能需要处理一些小问题。但我希望这篇文章能让你走上正轨！

Answer 2

小提琴：https://jsfiddle.net/wfm7fmxy/1/

它基本上做的是创建一个li元素，其中包含一个复选框和任务文本，就像你一样（只有值得注意的差异：id在任务li上设置而不是复选框），然后在复选框中添加onchange函数，该函数调用另一个函数toggleTask()：

function toggleTask()
{
    var task = document.getElementById(this.parentNode.id);
    if (this.checked)
    {
        task.style.textDecoration = 'line-through';
    }
    else
    {
        task.style.textDecoration = 'none';
    }
}

如果选中复选框，则执行此任务或以其他方式还原。

当我选中复选框时，如何删除我的待办事项应用程序中相应复选框的文本？

2 个答案: