Ajoutez des cases à cocher supplémentaires pour implémenter des fonctionnalités précédemment cochées/non cochées

Question

Ce formulaire est une liste de tâches avec HTML/CSS/JavaScript, et chaque ligne comporte une case à cocher basée sur les tâches terminées ou inachevées. J'ai créé un événement. Il obtient certaines valeurs d'un objet, comme le texte, l'heure de création, l'ID, etc., et ajoute enfin une balise li au html interne+=... Si la case précédente est cochée

mais que lorsque l'événement est déclenché (bouton enfoncé), la nouvelle ligne est ajoutée non cochée (ce qui est normal), mais la rangée de cases à cocher précédente est également décochée ! ?

Answer 1

Voici un extrait de code rapide qui reproduit votre problème. Exécutez-le, puis cochez la case. Notez que cocher/décocher la case ne change pas le code HTML que vous vérifiez ?

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

Voici un extrait de code alternatif qui ajoute un élément à la fin de la liste.

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