添加额外的复选框以实现先前选中/取消选中的功能

Question

这个表单是一个带有HTML/CSS/JavaScript的待办事项列表，每一行都有一个基于已完成任务或未完成任务的复选框。 我创建了一个事件。它从一个对象中获取一些值，比如文本、创建时间、ID等，最后将一个li标签附加到inner HTML+=...中。如果我在

中勾选了前一个复选框，但当触发事件（按下按钮）时，新的行添加时未勾选（这是正常的），但是前一行的复选框也未勾选！？

Answer 1

这是一个快速的代码片段，复制了你的问题。 运行它，然后在复选框上进行检查元素。注意，选中/取消选中复选框不会改变你正在检查的HTML代码？

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick, false);
}

function onAddBtnClick(evt)
{
    let newStr = "<li><input type='checkbox'/></li>";
    document.querySelector('ul').innerHTML += newStr;
}

    <ul>
        <li><input type='checkbox'/></li>
    </ul>
    <button id='addNewBtn'>添加新项目</button>

这是一个替代的代码片段，它在列表的末尾添加了一个项目。

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick2, false);
}

function onAddBtnClick2(evt)
{
    let newLi = document.createElement('li');
    newLi.innerHTML = "<input type='checkbox'/>";
    document.querySelector('ul').appendChild(newLi);
}

    <ul>
        <li><input type='checkbox'/></li>
    </ul>
    <button id='addNewBtn'>添加新项目</button>