動的チェックボックスonclickが機能しない

Question

動的チェックボックスを作成していて、チェックボックスをオンにするたびに関数を呼び出すようにしたい。チェックボックスはうまく見えますが、私のonclickイベントは機能しません。また、私の関数に 'this'を渡さなければ、関数もロード時に呼び出されます。以下 は私のコードです：

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

私は私がここで間違ってやっているものを教えてください。

Answer 1

以下のスニペットが機能します。私はこれがあなたがしたいことだと思います。あなたは、関数内でthisを渡し、また、あなたが実行可能なデモ/スニペットまたは[JSFiddle]（https://jsfiddle.net/）を共有することができます""

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>