0

The script bellow generates two check boxes with each their own on-click event.
Currently only the last generated check box does work and toggles just fine, the first check box doesn't seem to work at all.

How can I make both check boxes have their own unique onClick() event?

var toggles = document.getElementById("toggles");
scriptList = {
    "cBox1": ["Checkbox 1", "checkbox1", false],
    "cBox2": ["Checkbox 2", "checkbox2", true]
};

for (var script in scriptList) {
    var script = scriptList[script];
    var option = document.createElement("span");
    var cBox = document.createElement("input");
    cBox.value = script[1];
    cBox.type = "checkbox";
    option.style.color = "#6C77C1";
    cBox.onclick = function() {
     option.innerHTML = script[0] + "("+this.checked+") <br/>";
    };
    option.innerHTML = script[0] + "<br/>";
    toggles.appendChild(cBox);
    toggles.appendChild(option);
}
Click the checkboxes.<br/><br/>
<div id="toggles"></div>
Jordy19
  • 106
  • 2
  • 11
  • See the duplicate. In addition to that, instead of `cBox.checked`, use `this.checked`. – Felix Kling Mar 27 '17 at 17:02
  • I've changed the code in the OP based on what you said, click the `Run Code snippet` and you will see that it didn't really change anything. Anything else you can suggest me? Click the first check box and it will change the innerHTML of the second while they both have their own onClick event. – Jordy19 Mar 27 '17 at 17:07

0 Answers0