如何用JS实现Todo List任务的勾选样式切换功能？

刚接触编程，学完HTML/CSS后开始学习JavaScript，已经完成Todo List的任务添加与删除功能，但无法实现任务勾选功能——希望点击勾选按钮时，修改对应任务的text-decoration与背景色，查了资料许久仍未解决，恳请帮助。

我的代码 #

HTML代码 #

<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

<title>To-Do List</title>
  <link rel="stylesheet" href="tdl2.css">
</head>
<body>

<div id="add" class="entete">
<h2>To-Do List!</h2>
<input type="text" id="myInput" placeholder ="Laver la voiture..."> 
<button type="button" id="button">Ajouter</button>
</div>

<ul id="list"></ul>

<script src="tdl2.js"></script>
</body>
</html>

JavaScript代码 #

//SELECTORS
let taskInput = document.querySelector('#myInput');
let addTaskButton = document.querySelector('#button');
let taskList = document.querySelector('#list');

//EVENT LISTENERS
addTaskButton.addEventListener('click',addTask);

//FUNCTIONS
function addTask() {
    event.preventDefault();

    if(taskInput.value === "") {
        alert("Please enter a task!")
    }
    else {
         //CREATE TASK DIV
        let taskDiv = document.createElement('div');
        taskDiv.classList.add('task');

        //CREATE LI
        let taskLi = document.createElement('li');
        taskLi.innerText = taskInput.value;
        taskLi.classList.add('task-li');
        taskDiv.appendChild(taskLi);

        //DELETE BUTTON
        let deleteButton = document.createElement('button');
        deleteButton.innerHTML = '<i class="bx bx-eraser"></i>';
        deleteButton.classList.add('delete-btn');
        taskDiv.appendChild(deleteButton);

        taskList.appendChild(taskDiv);

        //CLEAR INPUT VALUE
        taskInput.value = '';

        deleteButton.addEventListener('click', () => {
            taskDiv.remove()
        });

        //CHECK BUTTON
        let checkButton = document.createElement('button');
        checkButton.innerHTML = '<i class="bx bx-check"></i>';
        checkButton.classList.add('check-btn');
        taskDiv.appendChild(checkButton);
    }
}

效果截图 #

解决方案 #

问题核心是未给勾选按钮绑定点击事件，推荐用CSS类控制样式（比直接修改JS样式更易维护），具体步骤如下：

1. 添加CSS完成状态类
   在tdl2.css中加入以下代码，定义任务完成后的样式：

/* 任务完成状态样式 */
.completed {
  text-decoration: line-through; /* 添加删除线 */
  background-color: #f0f0f0; /* 自定义背景色，可按需修改 */
  color: #888; /* 可选：将文字设为灰色 */
}

2. 给勾选按钮绑定点击事件
   在JavaScript中创建checkButton后，添加点击事件通过classList.toggle()实现样式切换：

//CHECK BUTTON
let checkButton = document.createElement('button');
checkButton.innerHTML = '<i class="bx bx-check"></i>';
checkButton.classList.add('check-btn');
taskDiv.appendChild(checkButton);

// 绑定勾选事件
checkButton.addEventListener('click', () => {
  // 切换任务文本的完成状态类
  taskLi.classList.toggle('completed');
  // 若需给整个任务块加背景色，可改为操作taskDiv：
  // taskDiv.classList.toggle('completed');
});

说明 #

• classList.toggle()会自动判断元素是否包含目标类：存在则移除，不存在则添加，实现勾选/取消的切换效果。
• 样式与逻辑分离，后续修改样式无需改动JS代码，符合前端开发最佳实践。

内容的提问来源于stack exchange，提问作者C-Rollot