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

我已经开始学习js，我正在尝试在数组中获取一个布尔值，并将其填充到复选框中

这是HTML部分：

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

我将全局变量设置为false：

let filterTodos = false

如果默认情况下未选中该值，则应显示整个数组，如果选中，则应仅显示数组中值为completed:true的项

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

以下是显示阵列的代码：

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);

我认为showTodos函数中应该有一些if子句，如果选中了id为filterTodo的复选框，那么它应该在数组中循环，并且只显示完成值为true的项

我尝试过使用下面的代码，但只是使用console.log进行测试，无论复选框是否选中，我都只得到假值。这是代码的一部分：

function validate() {
    let isChecked = false;
    if (document.getElementById(('filterTodo').checked)) {
      isChecked = true;
      console.log(isChecked);
    } else {
      isChecked = false;
      console.log(isChecked);
    }
  }

因此，主要的问题是，我无法显示复选框的正确值，如果已完成或未完成，它们都是未定义的

---

另一个问题是，如果我选中复选框以筛选数组，并且仅显示所有任务或仅显示已完成的任务，则无法编写代码。您的代码有一个轻微的逻辑错误：

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

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

尝试首先获取元素，然后请求选中的属性：

document.getElementById( 'filterTodo' ).checked;

然后，根据复选框是否选中，我得到true/false：

var todos=[{
文本：“订购机票”，
已完成：false
},{
文本：“疫苗预约”，
已完成：正确
}, {
文本：“订购签证”，
已完成：正确
}, {
文字：“预订酒店”，
已完成：false
}, {
文字：“预订去机场的出租车”，
已完成：正确
}];
showTodos（todos）；
函数addTodo（add_todo）{
var p=document.createElement（'p'）
p、 textContent=add_todo.text
document.querySelector（'body'）.appendChild（p）
var checkBox=document.createElement（“输入”）
var label=document.createElement（“标签”）
checkBox.type=“checkBox”
checkBox.value=addTodo.completed
document.querySelector（'body'）.appendChild（复选框）
document.querySelector（'body'）.appendChild（标签）
label.appendChild（document.createTextNode（add_todo.completed））
}
函数showTodos（show\u todos）{
//函数来显示整个对象
show_todos.forEach（函数（todo））{
addTodo（todo）；
}) 
}
函数验证（）{
让isChecked=false；
if（document.getElementById（'filterTodo'）。选中）{
isChecked=true；
控制台日志（已检查）；
}否则{
isChecked=false；
控制台日志（已检查）；
}
}

隐藏完成

使用

change

事件，即

onchange

而不是

onclick

谢谢，我在html代码上尝试了onchange，但在控制台上仍然只显示false。loggreat，我将在玩完代码后返回：）再次感谢：）是的，我现在正在查看筛选函数，我已经用它来显示未完成任务的长度，所以我将看看我在其中使用的逻辑。

document.getElementById( 'filterTodo' ).checked;