Tambahkan kotak pilihan tambahan untuk melaksanakan fungsi yang telah ditanda/tidak ditandakan sebelum ini

Question

Borang ini ialah senarai tugasan dengan HTML/CSS/JavaScript dan setiap baris mempunyai kotak pilihan berdasarkan tugasan yang telah selesai atau belum selesai. Saya membuat acara. Ia mendapat beberapa nilai daripada objek, seperti teks, masa penciptaan, ID, dsb., dan akhirnya menambahkan teg li pada HTML dalaman+=... Jika saya mempunyai kotak semak sebelumnya ditandakan masuk

tetapi apabila peristiwa dicetuskan (butang ditekan) baris baharu ditambah tanpa ditanda (yang biasa) tetapi satu baris kotak pilihan sebelumnya juga dinyahtanda! ?

Answer 1

Berikut ialah coretan kod pantas yang mereplikasi masalah anda. Jalankannya dan kemudian buat elemen semak pada kotak semak. Perhatikan bahawa menanda/menyahtanda kotak pilihan tidak mengubah kod HTML yang anda semak?

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

Berikut ialah coretan kod alternatif yang menambahkan item pada penghujung senarai.

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