JavaScript：无法动态重置动态创建的复选框的复选框值

Question

我用普通的JavaScript动态创建了一组复选框和标签。这样可以正常工作，并显示以下复选框：

const label = document.createElement("label");
const checkbox = document.createElement("input");
const description = document.createTextNode(course[i].name);

checkbox.type = "checkbox";
checkbox.id = "checkbox-" + course[i].name;
checkbox.value = course[i].name;

label.appendChild(checkbox);
label.appendChild(description);

const mainDiv = document.getElementById("main");
mainDiv.appendChild(label);

但是，当我单击屏幕上其他位置的按钮时，我需要该eventHandler重置所有复选框值，以便将其全部取消选中。我尝试了以下两个选项。没有一个会给我带来浏览器错误，但没有一个会产生预期的效果：

for (let i = 0, l = allItems.length; i < l; ++i) {
    document.getElementById("checkbox-" + allItems[i].name).checked = false;
 }

$("input[type=checkbox]").each(function () {
this.checked = false;
});

在浏览器控制台内部，我可以检索“ checked”的值，并将其设置为false，但是UI不能反映此更改。我在StackOverflow上四处张望。尽管有些人也有类似的问题，但我无法获得建议的解决方案来为我工作。

Answer 1

您必须取消选中按钮的事件处理程序功能内的复选框：

$('#reset').click(function(){
 $("input[type=checkbox]").each(function () {
   this.checked = false;
 });
});

演示：

var course = [{name: 'TestCourse1'},{name: 'TestCourse2'},{name: 'TestCourse3'}]
for(var i = 0; i < course.length; i++){
  const label = document.createElement("label");
  const checkbox = document.createElement("input");
  const description = document.createTextNode(course[i].name);

  checkbox.type = "checkbox";
  checkbox.id = "checkbox-" + course[i].name;
  checkbox.value = course[i].name;

  label.appendChild(checkbox);
  label.appendChild(description);

  const mainDiv = document.getElementById("main");
  mainDiv.appendChild(label);
}

$('#reset').click(function(){
  $("input[type=checkbox]").each(function () {
    this.checked = false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main"></div>

<button id="reset">Reset</button>