Add extra checkboxes to implement previously checked/unchecked functionality

Question

This form is a to-do list with HTML/CSS/JavaScript, and each row has a checkbox based on completed or unfinished tasks. I created an event. It gets some values ​​from an object, like text, creation time, ID, etc., and finally appends a li tag to inner HTML =... . If I have the previous checkbox checked in

but when the event is triggered (button pressed) the new row is added unchecked (which is normal) but the previous One row of checkboxes is also unchecked! ?

Answer 1

Here is a quick code snippet that replicates your problem. Run it and then make a check element on the checkbox. Notice that checking/unchecking the checkbox doesn't change the HTML code you're checking?

"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>

This is an alternative code snippet that adds an item to the end of the list.

"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>