如何将事件侦听器添加到动态创建的复选框并检查是否选中了复选框。 JavaScript答案

【问题标题】：How to add event listener to a dynamically created checkbox and check if checkbox is checked. JavaScript如何将事件侦听器添加到动态创建的复选框并检查是否选中了复选框。 JavaScript
【发布时间】：2018-02-21 14:55:16
【问题描述】：

我想在<li> 中创建的复选框中添加一个事件侦听器触发事件时，我想检查它是选中还是未选中据我了解，复选框的事件是“onChange”并且该属性已“选中”，但我的解决方案不起作用。

有人可以向我解释为什么这个解决方案不起作用吗？ JavaScript 新手，请以最简单的方式解释。请只使用 JavaScript 提前谢谢你

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

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")
}
}

【问题讨论】：

.querySelectorAll() 返回一个列表，而该列表没有 .addEventListener() 方法。试试.querySelector()，它返回第一个匹配元素而不是列表。（或者，如果可能有多个复选框，您需要遍历列表以向列表中的每个元素添加一个侦听器。）请参阅 this question 或 this question。

标签： javascript checkbox onchange addeventlistener

【解决方案1】：

我正在解决同样的问题并设法解决了！您可以将事件处理程序绑定到动态创建的元素，就像为它们分配 id 一样，例如通过 'li.onclick = checkCount;'，其中 checkCount 是您要分配给处理程序的函数的名称。经过大量的时间和努力，我创建了一个检查复选框状态的函数，将检查的数字推送到数组，并在 span 标签内返回数组的长度（也就是动态单击的复选框）。

当您将事件侦听器添加到复选框时，请务必声明其他函数为 false，否则绑定将不起作用。下面附上我的代码，希望对你有帮助。

    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;


    };

【讨论】：

【解决方案2】：

它不起作用，因为在您添加事件侦听器时复选框不存在：checkbox.addEventListener("onChange", test)。

您可以尝试在创建复选框之后添加事件侦听器：

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

【讨论】：