新增額外的複選框以實現先前選取/取消選取的功能

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>