如何在JavaScript待办清单中添加带checkbox属性的输入元素？

首先，你需要在创建任务时同步生成checkbox元素，把它和任务文本放在同一容器里，再给checkbox绑定状态切换事件，这样勾选时就能标记任务完成。另外你的HTML按钮事件绑定写错了，click要改成onclick，不然点击按钮不会触发addTask函数。

修改后的完整代码： #

JavaScript部分：

// ! DOM ELEMENTS
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

// ! ADD TASK
function addTask() {
  if (taskInput.value.trim() === '') { // 加trim避免输入空字符
    alert('Oh no... You have not written anything?');
    return;
  }

  // 创建容器包裹checkbox和任务文本，避免布局混乱
  const taskItem = document.createElement('div');
  taskItem.classList.add('task-item');

  // 创建checkbox元素
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';

  // 创建任务文本段落
  const paragraph = document.createElement('p');
  paragraph.textContent = taskInput.value;

  // 给checkbox绑定状态切换事件：勾选/取消时切换文本样式
  checkbox.addEventListener('change', function() {
    paragraph.classList.toggle('completed');
  });

  // 组装元素并添加到列表
  taskItem.appendChild(checkbox);
  taskItem.appendChild(paragraph);
  taskList.appendChild(taskItem);

  taskInput.value = '';
  saveTasks(); // 若要本地存储，记得把checkbox状态也一并保存
}

HTML部分：

<div class="container">
  <h1>TO DO LIST</h1>

  <input type="text" id="taskInput" placeholder="ENTER TASK HERE!">

  <button id="addButton" onclick="addTask()">ADD</button> <!-- 修正onclick属性 -->

  <div id="taskList"></div>

  <p> lorem 10</p>
</div>

<style>
/* 可选样式，让任务显示更直观 */
.task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

关键细节说明： #

• 用task-item容器包裹checkbox和文本：保证每个任务的结构统一，后续修改样式或批量操作更方便。
• 生成checkbox的核心：通过document.createElement('input')创建元素后，设置type='checkbox'即可得到带勾选功能的输入框。
• 状态切换逻辑：利用classList.toggle()在checkbox状态改变时，给段落添加/移除completed类，实现文本划掉的完成效果。
• 按钮事件修正：HTML中按钮的点击事件属性是onclick，不是click，之前的写法会导致按钮点击无响应。

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