编辑待办任务后，Checkbox添加id实现删除线功能失效问题

我写了一个TodoList的JavaScript代码，添加任务时勾选Checkbox能给label加上completed ID，实现文本删除线效果。但编辑任务输入内容后，Checkbox功能失效，勾选后无法给label添加删除线。我怀疑是editInput函数里新建的label没被原Checkbox事件正确识别。

原代码 #

HTML

<button class="btn btn-primary" type="button" id="addNewTask" >Add new task</button>

CSS

#completed{
  opacity: 0.5;
  text-decoration: line-through;
}

JavaScript

addNewTask.addEventListener('click', addTask);

function addTask(e) {

    const li = document.createElement("li");
    li.className = "list-group-item";
    tasks.appendChild(li);

    const label = document.createElement("label");
    label.className = "form-check-label";
    label.innerText = addInput.value;
    label.type = "text";
    label.setAttribute("readonly", "readonly");
    li.appendChild(label);

    const checkBox = document.createElement("input")
    checkBox.className = "form-check-input me-1 fa-pull-right"
    checkBox.type = "checkbox"
    checkBox.name = "chk"
    li.appendChild(checkBox);
    checkBox.id = "checkBox";

    const i2=document.createElement("i");
    i2.className="fa-regular fa-pen-to-square fa-pull-right";
    i2.id="editIcon"
    li.appendChild(i2);
    
    checkBox.addEventListener("change",checkedEvent);
    i2.addEventListener("click",editInput);

}

function editInput(e) {
    if (e.target.classList.contains("fa-pen-to-square")) {
        editIcon.className = "fa-solid fa-floppy-disk fa-pull-right";
        const label = li.firstElementChild;
        const input = document.createElement('input');
        input.type = 'text';
        input.value = label.textContent;
        li.insertBefore(input, label);
        li.removeChild(label);
    } else if (e.target.classList.contains("fa-floppy-disk")) {
        const input = li.firstElementChild;
        const label = document.createElement('label');
        label.className = "form-check-label";
        label.textContent = input.value;
        li.insertBefore(label, input);
        li.removeChild(input);
        editIcon.className = "fa-regular fa-pen-to-square fa-pull-right";
    }
}

function checkedEvent() {

    if (checkBox.checked == true && label.className == "form-check-label") {
        label.id = ("id", "completed");
    } else {
        label.id = ("");
    }
}

1. 全局变量混乱：checkedEvent里直接用的checkBox和label是addTask里的局部变量，触发事件时只会指向最后创建的那组元素，和当前操作的任务项完全不关联。
2. 编辑函数的全局引用：editInput里的li、editIcon都是全局变量，不是当前点击图标所在的任务项，导致元素操作混乱。
3. ID赋值写法错误：label.id = ("id", "completed");是无效语法，正确写法是直接赋值label.id = "completed"。
4. 重复ID问题：给每个Checkbox和编辑图标都设相同ID，会导致DOM查询混乱。

HTML（无改动）

<button class="btn btn-primary" type="button" id="addNewTask" >Add new task</button>

CSS（无改动）

#completed{
  opacity: 0.5;
  text-decoration: line-through;
}

JavaScript

const addNewTask = document.getElementById('addNewTask');
const tasks = document.getElementById('tasks'); // 确保页面存在这个任务容器元素
const addInput = document.getElementById('addInput'); // 确保页面存在这个输入框元素

addNewTask.addEventListener('click', addTask);

function addTask(e) {
    const li = document.createElement("li");
    li.className = "list-group-item";
    tasks.appendChild(li);

    const label = document.createElement("label");
    label.className = "form-check-label";
    label.innerText = addInput.value;
    label.setAttribute("readonly", "readonly");
    li.appendChild(label);

    const checkBox = document.createElement("input")
    checkBox.className = "form-check-input me-1 fa-pull-right"
    checkBox.type = "checkbox"
    checkBox.name = "chk"
    li.appendChild(checkBox);

    const editIcon = document.createElement("i");
    editIcon.className = "fa-regular fa-pen-to-square fa-pull-right";
    li.appendChild(editIcon);
    
    // 给事件处理函数传递当前任务项，确保操作的是对应元素
    checkBox.addEventListener("change", () => checkedEvent(li));
    editIcon.addEventListener("click", (e) => editInput(e, li));
}

function editInput(e, li) {
    const target = e.target;
    if (target.classList.contains("fa-pen-to-square")) {
        target.className = "fa-solid fa-floppy-disk fa-pull-right";
        const label = li.firstElementChild;
        const input = document.createElement('input');
        input.type = 'text';
        input.value = label.textContent;
        li.insertBefore(input, label);
        li.removeChild(label);
    } else if (target.classList.contains("fa-floppy-disk")) {
        const input = li.firstElementChild;
        const label = document.createElement('label');
        label.className = "form-check-label";
        // 保留之前的完成状态
        if (li.querySelector('input[type="checkbox"]').checked) {
            label.id = "completed";
        }
        label.textContent = input.value;
        li.insertBefore(label, input);
        li.removeChild(input);
        target.className = "fa-regular fa-pen-to-square fa-pull-right";
    }
}

function checkedEvent(li) {
    const checkBox = li.querySelector('input[type="checkbox"]');
    const label = li.querySelector('label');
    label.id = checkBox.checked ? "completed" : "";
}

• 通过任务项关联元素：给事件处理函数传递当前任务的li，在函数内部通过li查询对应的Checkbox和label，彻底解决全局变量混乱问题。
• 移除重复ID：不再给多个元素设置相同ID，改用父元素查询的方式获取目标元素。
• 保留完成状态：编辑保存时，检查当前Checkbox的勾选状态，给新创建的label同步加上completed ID，保证状态一致。
• 简化ID赋值：用三元表达式简化勾选状态的判断逻辑，修正无效的ID赋值写法。

内容的提问来源于stack exchange，提问作者Kubilay Kızılhan