Javascript - 从对象数组中读取值的复选框

Question

如果任务完成与否，我需要从数组中的对象读取待办事项列表中的复选框。并在它们完成和未选中时保持选中状态。

const todos = [
  {
    id: 1,
    title: 'Nakupit',
    description: 'Mlieko, syr, vajcia',
    completed: false,
  },
  {
    id: 2,
    title: 'Umyt auto',
    description: '+ povysavat',
    completed: true,
  },
]

这是数组，我尝试了类似这样的复选框。和变化，无法让它工作并从数组制作复选框更改数组或值，检查，如果完成

 toDoCheckbox.addEventListener('click', () => {
      if (toDoCheckbox.checked = true) {
       return todos.completed === true
        
      } else {
       return todos.completed === false
      }
    });

有人可以帮忙吗？

Answer 1

您可以修改todos 状态，方法是通过id 查找它并翻转其completed 状态。

我添加了请求重新渲染的按钮。这将使用当前状态重新构建复选框。

const todos = [{
  id: 1,
  title: 'Nakupit',
  description: 'Mlieko, syr, vajcia',
  completed: false,
}, {
  id: 2,
  title: 'Umyt auto',
  description: '+ povysavat',
  completed: true,
}]

const main = () => {
  const btn = document.querySelector('.btn-render')
  btn.addEventListener('click', reRender)
  renderTodos()
}

const reRender = (e) => {
  renderTodos()
}

const onCheck = (e) => {
  const id = parseInt(e.currentTarget.dataset.id, 10)
  const found = todos.find(todo => todo.id === id)
  if (found) {
    found.completed = !found.completed // Flip status
  }
}

const renderTodos = () => {
  const container = document.querySelector('.container')

  container.innerHTML = '' // Clear

  todos.forEach(todo => {
    let wrapper = document.createElement('div')
    let label = document.createElement('label')
    let checkbox = document.createElement('input')

    wrapper.classList.add('checkbox-wrapper')
    label.textContent = todo.title
    checkbox.type = 'checkbox'
    checkbox.checked = todo.completed
    checkbox.dataset.id = todo.id
    checkbox.addEventListener('change', onCheck)

    wrapper.appendChild(label)
    wrapper.appendChild(checkbox)
    container.appendChild(wrapper)
  })
}

main()

.checkbox-wrapper label {
  display: inline-block;
  width: 6em;
}

<div class="container"></div>
<br />
<button class="btn-render">Re-render</button>