Question

我想在<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")
}
}

Answer 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;


    };

Answer 2

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

您可以尝试创建复选框后立即添加事件监听器：

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

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

2 个答案: