Fügen Sie zusätzliche Kontrollkästchen hinzu, um zuvor aktivierte/nicht aktivierte Funktionen zu implementieren

Question

Dieses Formular ist eine Aufgabenliste mit HTML/CSS/JavaScript und jede Zeile verfügt über ein Kontrollkästchen basierend auf abgeschlossenen oder nicht erledigten Aufgaben. Ich habe eine Veranstaltung erstellt. Es ruft einige Werte von einem Objekt ab, wie Text, Erstellungszeit, ID usw., und hängt schließlich ein li-Tag an inner HTML+=... Wenn ich das vorherige Kontrollkästchen in

aktiviert habe, aber wenn das Ereignis ausgelöst wird (Taste gedrückt), wird die neue Zeile deaktiviert hinzugefügt (was normal ist), aber die vorherige Zeile mit Kontrollkästchen ist ebenfalls deaktiviert! ?

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>