我的待办事项列表上的复选框不起作用答案

【问题标题】：Checkbox on my To Do list isn't working我的待办事项列表上的复选框不起作用
【发布时间】：2016-05-16 18:23:01
【问题描述】：

我正在尝试仅使用 javascript 和 html 创建一个简单的待办事项列表。每当用户选中复选框时，我希望复选框的 css 更改为换行的文本装饰。在调试时，我发现函数 DeleteToDo 甚至不会被更改事件调用。

任何想法我做错了什么？

var todo = "";

$(document).ready(function (){

    $("button").on("click", addATodo);
    $("input[type='checkbox']").on("change", deleteTodo());


});

function addATodo(){
    var todo = $("input").val();
    console.log(todo);
    $("div").append('<input type="checkbox"><p>' + todo + '</p><br/>');
}

function deleteTodo(){
    if($(this).is(":checked")) {
        $("p").css("text-decoration","line-through");

    }

}

<input type="text" placeholder="To do"/>
<button>Add a To Do</button>
<br>
<div></div>

【问题讨论】：

标签： checkbox checkboxlist

【解决方案1】：

您的代码中没有包含jQuery。将 HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 放在您的代码之前。

同样，当按钮被按下时，您的程序甚至不知道按钮被按下，并且不做任何响应。您需要做的是在按钮上添加一个on-click listener，如下所示：

<buttononclick=addATodo()>Add a To Do</button>

【讨论】：

【解决方案2】：

当你这样做时

$("input[type='checkbox']").on("change", deleteTodo());

你需要传递函数。所以让它deleteTodo（没有()）。此外，这只会为已经在 DOM 中的input[type='checkbox']s 创建回调。您必须在每个复选框后重新添加.on()。这样就可以了：

function addATodo(){
    var todo = $("input").val();
    var checkbox = $('<input type="checkbox"><p>'+todo+'</p></input><br />')
    $("div").append(checkbox);
    checkbox.on("click", deleteTodo);
}

【讨论】：

谢谢。这很好用，但如果可能的话，这让我想到另一个问题：我不能在 DOM 加载后操作新添加的元素吗？
好的，你可以在cmets这里问，我可以编辑我的答案。
刚刚编辑了我的评论（不小心按回车键：））
您可以添加/操作它们，但是当您创建新元素时，on-change（或类似的）回调不会自动添加...我不鼓励一遍又一遍地调用$("input[type='checkbox']").on(...) ，因为您实际上将拥有一个带有 5 个 on-change 回调的元素，因为您一遍又一遍地添加它。这就是为什么我创建了一个 checkbox 变量，并将 on-change only 分配给该元素。

【解决方案3】：

除了忘记添加jQuery之外，最重要的错误在这里：

$("input[type='checkbox']").on("change", deleteTodo());

由于加载文档时还没有复选框，jQuery 不会附加任何侦听器。此外，您必须传递函数 deleteTodo 本身，而不是返回值。所以删除()。

我把它改成了这个。您可能需要阅读整个 sn-p 以了解发生了什么。

$("#todos").on("change input[checkbox]", deleteTodo);

这会将侦听器附加到 ID 为 #todos 的父元素。一般来说，最好在 jQuery 中使用 id 和类作为选择器，因为使用诸如 div 之类的标签通常会针对很多您不想操作的元素。

我还更改了 deleteTodo 函数以使用 toggleClass 而不是修改内联 css。要仅修改单个 todo 的文本，您必须从传递给 deleteTodo 的事件中获取该值。您的代码将修改文档中的每个 p 元素。

$(document).ready(function() {
  $("#button").on("click", addATodo);
  $("#todos").on("change input[checkbox]", deleteTodo);
});

function addATodo() {
  var todo = $("input").val();
  $("#todos").append(
    '<div class="todo"><input type="checkbox"/>' + todo + '</div>');
}

function deleteTodo(event) {
  $(event.target).parent().toggleClass("strikethru");
}

.strikethru {
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="To do" />
<button id="button">Add a To Do</button>
<div id="todos"></div>

【讨论】：