如何解决待办列表中多行复选框无法选中的问题？

问题根源 #

你遇到的问题是因为每次点击「添加」按钮时，都会重新获取所有复选框并重复绑定点击事件。比如：

• 添加第1个待办时，给它绑定1次点击事件；
• 添加第2个待办时，会给两个复选框各绑定1次事件，此时第一个复选框就有2次事件监听；
• 点击时会连续切换两次类名，最终看起来像是没选中。

解决方案1：只为新创建的复选框绑定事件 #

直接给刚创建的复选框绑定点击事件，避免重复绑定。修改后的JS代码如下：

const addButton = document.querySelector(".search_add_container button");
const table = document.querySelector("table");

addButton.addEventListener("click", function() {
  var inputValue = document.getElementById("inputContent");
  var tableRow = document.createElement("tr");
  var dataCell = document.createElement("td");
  var dataCellInnerContainer = document.createElement("div");
  dataCellInnerContainer.className = "data_cell_container";
  var tableCheckboxes = document.createElement("div");
  tableCheckboxes.className = "checkbox_box";
  var img = document.createElement("img");
  img.src = "starGrey.png";
  img.alt = "starGrey";
  var cellHeader = document.createElement("h5");
  cellHeader.className = "cell_header";
  var cellTent = document.createElement("h5");
  cellTent.className = "cell_tent";
  var time = document.createElement("p");

  // 给新创建的复选框单独绑定事件
  tableCheckboxes.addEventListener("click", () => {
    tableCheckboxes.classList.toggle("checked");
    // 可选：点击复选框时给td添加划线样式
    // dataCell.classList.toggle("checked");
  });

  if (inputValue.value == "") {
    alert("请添加待办内容！");
  } else {
    cellHeader.innerText = inputValue.value;
    cellTent.innerText = inputValue.value;
    time.innerText = new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: "2-digit"
    });
    table.appendChild(tableRow);
    tableRow.appendChild(dataCell);
    dataCell.appendChild(dataCellInnerContainer);
    dataCellInnerContainer.appendChild(tableCheckboxes);
    dataCellInnerContainer.appendChild(img);
    dataCellInnerContainer.appendChild(cellHeader);
    dataCellInnerContainer.appendChild(cellTent);
    dataCellInnerContainer.appendChild(time);

    inputValue.value = "";
  }
});

解决方案2：使用事件委托（更优） #

不需要给每个复选框单独绑定事件，而是在父元素（如table）上绑定一次事件，借助事件冒泡处理所有复选框的点击。这种方法更适合动态添加元素的场景，性能更好。

修改后的JS代码如下：

const addButton = document.querySelector(".search_add_container button");
const table = document.querySelector("table");

// 事件委托：在table上绑定一次点击事件，处理所有复选框点击
table.addEventListener("click", function(e) {
  if (e.target.classList.contains("checkbox_box")) {
    e.target.classList.toggle("checked");
    // 可选：点击复选框时给对应td添加划线样式
    // const targetTd = e.target.closest("td");
    // targetTd.classList.toggle("checked");
  }
});

addButton.addEventListener("click", function() {
  var inputValue = document.getElementById("inputContent");
  var tableRow = document.createElement("tr");
  var dataCell = document.createElement("td");
  var dataCellInnerContainer = document.createElement("div");
  dataCellInnerContainer.className = "data_cell_container";
  var tableCheckboxes = document.createElement("div");
  tableCheckboxes.className = "checkbox_box";
  var img = document.createElement("img");
  img.src = "starGrey.png";
  img.alt = "starGrey";
  var cellHeader = document.createElement("h5");
  cellHeader.className = "cell_header";
  var cellTent = document.createElement("h5");
  cellTent.className = "cell_tent";
  var time = document.createElement("p");

  if (inputValue.value == "") {
    alert("请添加待办内容！");
  } else {
    cellHeader.innerText = inputValue.value;
    cellTent.innerText = inputValue.value;
    time.innerText = new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: "2-digit"
    });
    table.appendChild(tableRow);
    tableRow.appendChild(dataCell);
    dataCell.appendChild(dataCellInnerContainer);
    dataCellInnerContainer.appendChild(tableCheckboxes);
    dataCellInnerContainer.appendChild(img);
    dataCellInnerContainer.appendChild(cellHeader);
    dataCellInnerContainer.appendChild(cellTent);
    dataCellInnerContainer.appendChild(time);

    inputValue.value = "";
  }
});

内容的提问来源于stack exchange，提问作者user19080871