动态复选框onclick无效

Question

I am creating dynamic checkboxes and want a function to be called every time I check any checkbox. The checkbox looks good but my onclick event does not work. Also if I do not pass 'this' to my function, my function gets called on load as well. Below is my code:

for(var i=0; i<options.length; i++) {
  var op = options[i].new_name;     
  var label = document.createElement("label");
  var description = document.createTextNode(op);

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";    
  checkbox.name = "multiselectCheckbox";
  checkbox.value = op;
  checkbox.onclick= "getCheckedValues(this)";

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

  document.getElementById("multiselect").appendChild(label);    
  document.getElementById("multiselect").appendChild(document.createElement("br"));
}

Please let me know what am I doing wrong here.

Answer 1

The below snippet works. I suppose this is what you want to do. You need not pass this in the function and also call the function without ""

 var options = [{new_name: "1"}, {new_name: "2"}] for(var i=0; i<options.length; i++) { var op = options[i].new_name; var label = document.createElement("label"); var description = document.createTextNode(op); var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = "multiselectCheckbox"; checkbox.value = op; checkbox.onclick = getCheckedValues; label.appendChild(checkbox); label.appendChild(description); document.getElementById("multiselect").appendChild(label); document.getElementById("multiselect").appendChild(document.createElement("br")); } function getCheckedValues() { alert(this.value); } 

 <div id="multiselect"></div>