title: JavaScript: Can't dynamically reset checkbox values for dynamically created checkboxes
body: <p>I dynamically created a set of checkboxes and labels in plain JavaScript. This works fine and the checkboxes are displayed:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>However, when I click a button elsewhere on the screen, I need that eventHandler to reset all of the checkbox values so that they are all unchecked. I tried both of the following two options. None give me browser errors, but neither have the desired effect:</p>
  
  <pre><code>for (let i = 0, l = allItems.length; i &lt; l; ++i) {
      document.getElementById("checkbox-" + allItems[i].name).checked = false;
   }
  
  $("input[type=checkbox]").each(function () {
  this.checked = false;
  });
  </code></pre>
  
  <p>Inside the browser console I can retrieve the value of "checked", and set it to false, but the UI does not reflect this change. I looked all over on StackOverflow. Although there were people within similar questions, I could not get the suggested solutions to work for me.</p>
  
  <p><a href="https://i.stack.imgur.com/bNbpS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bNbpS.png" alt="Browser debugging results"></a></p>