如何将事件侦听器添加到动态创建的复选框，以及如何检查复选框是否已选中。 JavaScript的

Question

I want to add an event listener to the checkbox that is created within an <li> When the event is triggered I want to check if it is checked or unchecked From my understanding the event for a checkbox is "onChange" and the property is "checked" but my solution is not working. 我想向事件<li>创建的复选框添加事件侦听器。触发事件后，我想检查事件是选中还是未选中。根据我的理解，复选框的事件是“ onChange”，属性是“已检查”，但我的解决方案无法正常工作。

Can someone please explain to me why this solution does not work? 有人可以向我解释为什么该解决方案不起作用吗？ New to JavaScript so please explain in the most simple way. JavaScript的新手，因此请以最简单的方式进行说明。 JavaScript only please Thank you in advance 仅JavaScript，请先谢谢

HTML HTML

 <body>
    <div class="wrapper">
        <ul id="taskList">

        </ul>
        <div id="add-task-area">
            <input type="text" id="addTaskInput" value="">
            <button id="addTaskButton">Add Task</button>
        </div>
    </div>
</body>

JAVASCRIPT JAVASCRIPT

let taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");

const addTask = () => {
        if (addTaskInput.value != " ") {
            let taskItem = document.createElement("li");    
            let taskText = document.createElement("span");
            taskText.textContent = addTaskInput.value;
            let checkBox = document.createElement("input");
            checkBox.setAttribute("type", "checkBox");
            checkBox.setAttribute("class", "checkbox");
            let removeItem = document.createElement("button");
            removeItem.setAttribute("class", "remove");
            removeItem.textContent = "Delete";
            taskList.appendChild(taskItem);
            taskItem.appendChild(taskText);
            taskItem.appendChild(checkBox);
            taskItem.appendChild(removeItem);
            addTaskInput.value = " ";
        };
}

addTaskButton.addEventListener("click", addTask);

addTaskInput.addEventListener("keydown", (event) => {
    if (event.keyCode == 13) {
   addTask();
  }});

let checkbox = document.querySelectorAll(".checkbox")
checkbox.addEventListener("onChange", test);

const test = () => {
if (checkbox.checked) {
alert("checked");
} else {
  alert ("unchecked")
}
}

Answer 1

I am working on the same problem and managed to get it figured out! 我正在研究同一个问题，并设法弄清楚了！ You can bind event handlers to dynamically created elements the same way you assign an id to them, such as by doing 'li.onclick = checkCount;' 您可以将事件处理程序绑定到动态创建的元素，就像为它们分配ID一样，例如通过执行'li.onclick = checkCount;' , where checkCount is the name of the function you want to assign to the handler. ，其中checkCount是您要分配给处理程序的函数的名称。 After a lot of time and effort, I created a function that checks the state of checkboxes, pushes the number that are checked to an array, and returns the length of the array(aka the dynamically clicked checkboxes) within a span tag. 经过大量的时间和精力，我创建了一个函数来检查复选框的状态，将检查的数字推入数组，然后返回span标记内数组的长度（也就是动态单击的复选框）。

When you add the event listener to the checkbox, it is important to state that the other function is false, or else the binding will not work. 将事件侦听器添加到复选框时，重要的是要声明其他函数为false，否则绑定将无法工作。 I have attached my code below, I hope it is helpful to you. 我在下面附加了我的代码，希望对您有帮助。

    const list = document.getElementById("todo-list");

    //creates new li and checkboxes
    function newTodo(evt) {
    //stops page from reloading every time
      evt.preventDefault();
      const input = document.getElementById("todo-text").value;
      const li = document.createElement("li");
      li.appendChild(document.createTextNode("- " + input));
      list.appendChild(li);
      document.getElementById("todo-text").value = "";
      var checkbox = document.createElement('input');
      checkbox.type= "checkbox";
      checkbox.value = 1;
      checkbox.class = "todo";
      li.appendChild(checkbox);
      li.onclick = checkCount;

    }
// binds event listener to call first function

    const form = document.getElementById("btn").addEventListener('click', newTodo);

//specifies this will call only 2nd function since 1st function has finished

    check = document.getElementsByClassName('todo');
    for (var i = 0; i < check.length; i++) {
        check[i].addEventListener('click', newTodo, false);
    }



    const checkCount = function () {
        var selected = [];
        var span = document.getElementById('item-count');
        var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
        for (var i = 0; i < checkboxes.length; i++) {
            selected.push(checkboxes[i]);

            }
            span.innerHTML = selected.length;


    };

Answer 2

It doesn't work because the checkbox doesn't exist by the time you are adding the event listener: checkbox.addEventListener("onChange", test) . 它不起作用，因为在添加事件侦听器时该复选框不存在： checkbox.addEventListener("onChange", test) 。

You can try adding the event listener right after you create the checkbox: 您可以在创建复选框后立即尝试添加事件监听器：

...
var checkbox = document.createElement('input');
checkbox.addEventListener("onChange", test) // <-- add this line
checkbox.type= "checkbox";
...

如何将事件侦听器添加到动态创建的复选框，以及如何检查复选框是否已选中。 JavaScript的

问题描述

2 个解决方案

解决方案1
0 2019-08-27 00:18:26

解决方案2
0 2019-08-27 01:12:04

如何将事件侦听器添加到动态创建的复选框，以及如何检查复选框是否已选中。 JavaScript的

问题描述

2 个解决方案

解决方案1 0 2019-08-27 00:18:26

解决方案2 0 2019-08-27 01:12:04

解决方案1
0 2019-08-27 00:18:26

解决方案2
0 2019-08-27 01:12:04