点击span标签无法选中对应复选框的问题该如何解决？

解决方案 #

你只需要补全crossClick函数即可，同时建议修正现有代码中ID重复的不规范问题：

1. 补全crossClick函数
   点击span时通过父级li定位到同级的复选框，修改其checked属性即可，额外添加阻止事件冒泡逻辑，避免触发li绑定的crossOut事件产生冲突。

function crossClick(e) {
  // 阻止事件冒泡到父级li
  e.stopPropagation();
  // 定位到当前span对应的复选框
  const targetCheckbox = this.parentElement.querySelector('input[type="checkbox"]');
  // 切换复选框选中状态，若需点击仅勾选不取消，改为 targetCheckbox.checked = true 即可
  targetCheckbox.checked = !targetCheckbox.checked;
}

2. 修正ID重复问题
   你当前在循环中给所有li设置了相同的id="task"，给所有复选框设置了相同的id="chore"，不符合HTML ID全局唯一的规范，建议改为类名：

// 把循环里的两行ID赋值替换为类名赋值
task.className = "task";
input.className = "chore";

可选无JS实现方案 #

你也可以直接把span替换为label标签，利用HTML原生特性实现点击自动选中复选框，不需要绑定额外的点击事件：

// 修改createTaskElements中对应的创建逻辑
for (var i = 0; i < arrChores.length; i++) {
  var task = document.createElement("LI");
  task.className = "task";
  var input = document.createElement("INPUT");
  input.type = "checkbox";
  // 给每个复选框设置唯一ID
  input.id = "chore-" + i;
  input.className = "chore";
  // 把span换成label
  var label = document.createElement("LABEL");
  label.innerHTML = arrChores[i];
  // 绑定label和复选框的关联
  label.htmlFor = "chore-" + i;
  task.appendChild(input);
  task.appendChild(label);
  task.addEventListener("click", crossOut);
  document.getElementById("itemsList").append(task);
}

这种方案不需要写crossClick相关的JS逻辑，原生支持点击文本选中复选框。

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