时间戳

首页 > 解决方案 > 提示后在纯 JS 中保持复选框状态

javascript - 提示后在纯 JS 中保持复选框状态

问题描述

我有一个用香草 javascript 编写的简单 TODO 应用程序。这是应用程序：

步骤1

我此时遇到的问题/问题是：

当我单击新建待办事项按钮时，复选框的现有选中状态消失。

我不确定如何在提示窗口确定单击后保持复选框状态。请在下面找到源代码。

第2步

 const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const checkbox = document.createElement( "input" ); 
checkbox.type = "checkbox" 
checkbox.id = classNames.TODO_CHECKBOX 

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  let newTodo = prompt("Please enter a todo item");
  if(newTodo){ 
    itemCountSpan.innerHTML = parseInt(itemCountSpan.innerHTML) + 1
    list.append(checkbox)
    list.innerHTML += "<li>" + newTodo 
  }

  let allCheckBoxes = document.querySelectorAll("input[id='todo-checkbox']");
  uncheckedCountSpan.innerHTML = allCheckBoxes.length
  console.log(allCheckBoxes.length)


  for(let i = 0; i < allCheckBoxes.length; i++){
  allCheckBoxes[i].onclick = function() {
    if ( this.checked ) {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) - 1
    } 
    else {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
    }
  };
  }
}

如果您有任何想法/方向，请告诉我。

提前致谢。

标签： javascriptdom

解决方案

您有两个问题：首先，您每次都附加相同的复选框。其次，您正在直接编辑 innerHTML，这会强制 DOM 重新渲染所有内容，从而恢复输入的状态。这是我的做法：

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  let newTodo = prompt("Please enter a todo item");
  if(!newTodo){
    return
  }
  itemCountSpan.innerHTML = parseInt(itemCountSpan.innerHTML) + 1
  uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
  const checkbox = document.createElement( "input" ); 
  checkbox.onclick = function() {
    if ( this.checked ) {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) - 1
    } 
    else {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
    }
  };
  checkbox.type = "checkbox" 
  checkbox.class = classNames.TODO_CHECKBOX 
  list.append(checkbox)
  const listItem = document.createElement("li")
  listItem.innerHTML = newTodo
  list.append(listItem)
}

请注意，我还用 a 替换了id复选框的class- 有多个复选框，并且ids 应该是唯一的。

推荐阅读