Question

我已经开始学习js，并且正在尝试在数组中采用布尔值并将其填充到复选框中。

这是HTML部分：

spec <- spec_creator(x, 'null', MA, AR, I, p, q)
garch <- tryCatch(ugarchfit(spec = spec, data = apple['A'],
                            solver = 'hybrid', solver.control = list(trace = 0)),
                  error = function(e) e)
if(inherits(garch, "error")) {
  garch <- ugarchfit(spec = spec, data = apple['A'],
                     solver = 'nloptr', solver.control = list(trace = 0))
}

这是我的数组：

<label style="font: bold 1.5em courier !important">
 <input type="checkbox" id="filterTodo" onclick="validate()">Hide completed
 </label>

然后我将全局变量设置为false：

let todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

如果未选中该值作为默认值，则应显示整个数组，如果选中，则应仅显示数组中具有完成值的项目：true

所以我的第一个任务实际上是显示数组中的所有项目，我确实要显示每个项目的所有文本值以及一个复选框，但是我在复选框和标签上得到的值是不确定的。

这是显示数组的代码：

let filterTodos = false

我认为我的showTodos函数中应该有一些if子句，如果选中了ID为filterTodo的复选框，则它应该遍历数组，并且仅显示完成值为true的项目。

我有点想尝试以下代码，但是无论使用console.log进行测试，无论是否选中该复选框，我都只会得到错误的值。这是代码的一部分：

function addTodo(add_todo) {
  const p = document.createElement('p')
    p.textContent = add_todo.text
    document.querySelector('body').appendChild(p)

    let checkBox = document.createElement("input")
    let label = document.createElement("label")
        checkBox.type = "checkbox"
        checkBox.value = addTodo.completed
        document.querySelector('body').appendChild(checkBox)
        document.querySelector('body').appendChild(label)
        label.appendChild(document.createTextNode(todos.completed))

}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function (todo) {
    addTodo(todo);  
  }) 
}

showTodos(todos);

所以，主要的问题是，无论是否完成，我都无法为复选框显示正确的值，它们都是未定义的。

另一个问题是，如果我选中复选框以过滤数组，并且仅显示所有任务或仅显示已完成的任务，我将无法编写代码

Answer 1

您的代码有轻微的逻辑错误：

document.getElementById(('filterTodo').checked))

这基本上意味着：查找具有字符串'filterTodo'的checked属性值的id的元素。由于字符串没有检查属性，因此找不到元素，并且isChecked永远不会设置为true。

尝试首先获取元素，然后要求检查属性：

document.getElementById( 'filterTodo' ).checked;

然后我得到对/错，这取决于是否选中了该复选框：

var todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}];
	
showTodos(todos);

function addTodo(add_todo) {
  var p = document.createElement('p')
  p.textContent = add_todo.text
  document.querySelector('body').appendChild(p)
  var checkBox = document.createElement("input")
  var label = document.createElement("label")
  checkBox.type = "checkbox"
  checkBox.value = addTodo.completed
  document.querySelector('body').appendChild(checkBox)
  document.querySelector('body').appendChild(label)
  label.appendChild(document.createTextNode(add_todo.completed))
}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function (todo) {
  addTodo(todo);  
  }) 
}

function validate() {
  let isChecked = false;
  if ( document.getElementById( 'filterTodo' ).checked ) {
    isChecked = true;
    console.log(isChecked);
  } else {
    isChecked = false;
    console.log(isChecked);
  }
}

	<label style="font: bold 1.5em courier !important">
		<input type="checkbox" id="filterTodo" onchange="validate()">Hide completed
	</label>

现在，您只需要在todos数组上添加.filter（）逻辑，即可获得仅包含尚未完成的待办事项的新数组，然后清除先前渲染的待办事项的主体，最后重新渲染生成的过滤器数组。

编辑：

标签内的未定义值是由以下原因引起的：

label.appendChild(document.createTextNode(todos.completed))

todos是整个数组，而不是项目，因此您需要：

label.appendChild(document.createTextNode(add_todo.completed))

如果您需要在标签上显示true / false值

将数组的值填充为布尔值复选框

1 个答案: