如何不点击复选框本身，通过JavaScript实现点击任务勾选复选框？

完全可行，而且能完美解决你之前遇到的「所有label触发同一个复选框」的问题——核心原因是你之前给所有复选框用了同一个id="box"，导致for属性全指向同一个元素。下面是纯JS的实现方案，彻底摆脱label的for属性：

实现思路 #

给每个任务项单独绑定点击事件，直接操作对应复选框的checked状态，不需要依赖id或for属性，通过DOM元素的直接引用建立关联。

完整代码示例 #

<div id="todo-list"></div>
<button id="add-task">添加新任务</button>

const todoList = document.getElementById('todo-list');
const addTaskBtn = document.getElementById('add-task');

// 添加任务的逻辑
addTaskBtn.addEventListener('click', () => {
  // 创建复选框
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  
  // 创建任务文本（不用label，用普通span即可）
  const taskText = document.createElement('span');
  taskText.textContent = `任务 ${todoList.children.length + 1}`;
  taskText.style.marginLeft = '8px';
  taskText.style.cursor = 'pointer'; // 提示用户可点击
  
  // 任务项容器
  const taskItem = document.createElement('div');
  taskItem.style.margin = '8px 0';
  taskItem.appendChild(checkbox);
  taskItem.appendChild(taskText);
  
  // 绑定任务文本的点击事件：切换对应复选框状态
  taskText.addEventListener('click', () => {
    checkbox.checked = !checkbox.checked;
    // 可选：同步任务文本样式，优化体验
    updateTaskStyle(checkbox, taskText);
  });
  
  // 可选：复选框状态变化时同步文本样式
  checkbox.addEventListener('change', () => {
    updateTaskStyle(checkbox, taskText);
  });
  
  todoList.appendChild(taskItem);
});

// 辅助函数：更新任务文本样式
function updateTaskStyle(checkbox, taskText) {
  if (checkbox.checked) {
    taskText.style.textDecoration = 'line-through';
    taskText.style.color = '#666';
  } else {
    taskText.style.textDecoration = 'none';
    taskText.style.color = '#000';
  }
}

为什么这个方案能解决你的问题 #

1. 无重复id冲突：完全不依赖id和for属性，每个任务文本直接操作自己对应的复选框实例，不会出现「所有点击都触发同一个复选框」的问题。
2. 逻辑清晰：任务项创建时就完成事件绑定，每个任务的复选框和文本是强关联的，后续维护也更方便。
3. 可扩展性强：可以轻松添加更多交互（比如删除任务、编辑任务文本），不需要改动关联逻辑。

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