刷新页面时如何阻止复选框被取消选中？答案

【问题标题】：how to stop Checkbox from getting unchecked when page is refreshed?刷新页面时如何阻止复选框被取消选中？
【发布时间】：2020-12-27 13:16:46
【问题描述】：

所以我正在创建一个待办事项列表，并将任务保存到 localStorage，当我刷新页面时，任务仍然存在，但复选框未被选中我如何在刷新时阻止复选框未被选中这页纸注意：我是通过 js 创建复选框，所以当我添加任务时，它会动态创建复选框。

/* arry that holds tasks */
let tasks = [];

/* create a todo object */
const addTask = (text) => {
    const todoTask = {
        text,
        checked: false,
        id: Date.now(),
    }
    tasks.push(todoTask);
    renderTodo(todoTask);
};
 
const formT = document.querySelector(`[data-new-todo-form]`)
const inputT = document.querySelector(`[data-new-todo-input]`)
const todoList = document.getElementById('todo-list');

formT.addEventListener('submit', e => {
    e.preventDefault()
    
    let text = inputT.value.trim();
    if(text !== '') {
       addTask(text);
       inputT.value = '';
       inputT.focus();

    } 
 
})

const renderTodo = (todoTask)=> {

    localStorage.setItem('tasksRef', JSON.stringify(tasks));


    const item = document.querySelector(`[data-key='${todoTask.id}']`);

    if (todoTask.deleted) {
        // remove the item from the DOM
        item.remove();
        return
      }

    const isChecked = todoTask.checked ? 'done': '';

    const node = document.createElement('li')
    node.setAttribute('class', `todo-item ${isChecked}`);
    node.setAttribute('data-key', todoTask.id);
    node.innerHTML = `
    
    <input class="js-tick save-cb-state" id="${todoTask.id}" type="checkbox"/>
    <span>${todoTask.text}</span>
    <img class="delete" width="15px" height='15px' src="/images/icon-cross.svg" alt="cross">`
    ;
    todoList.append(node);

    if (item) {
        node.replaceWith(item)
    } else {
        todoList.append(node)
    }
}

todoList.addEventListener('click', e => {
    if (e.target.classList.contains('js-tick')) {
        const itemKey = e.target.parentElement.dataset.key;
        toggleDone(itemKey);
    }

    if (e.target.classList.contains('delete')) {
        const itemKey = e.target.parentElement.dataset.key;
        deleteTodo(itemKey);
      }
    
});

const toggleDone = (key) => {
    
    const index = tasks.findIndex(task=> task.id === Number(key));

    tasks[index].checked = !tasks[index].checked;
    renderTodo(tasks[index]);
}
const deleteTodo = (key) => {
    const index = tasks.findIndex(item => item.id === Number(key));

    const todoTask = {
        deleted: true,
        ...tasks[index]
      };
      tasks = tasks.filter(item => item.id !== Number(key));
  renderTodo(todoTask);
}
document.addEventListener('DOMContentLoaded', () => {
    const ref = localStorage.getItem('tasksRef');
    if (ref) {
      tasks = JSON.parse(ref);
      tasks.forEach(task => {
        renderTodo(task);
      });
    }
  });

【问题讨论】：

标签： javascript css arrays web-applications

【解决方案1】：

当您向 DOM 添加复选框时，您应该为此设置 Checked 属性。使用此代码更改 renderTodo：

node.innerHTML = `   
<input class="js-tick save-cb-state" id="${todoTask.id}" type="checkbox" ${isChecked ? "checked" : ""}/>
<span>${todoTask.text}</span>
<img class="delete" width="15px" height='15px' src="/images/icon-cross.svg" alt="cross">`
;

如果你把你的 html 代码我可以创建现场演示，我认为这个更改将解决你的问题

【讨论】：