javascript - 如何将 onchange 属性添加到 JavaScript 生成的复选框(在选中/取消选中时触发)？

Question

我有一个很大的 json 人员列表，他们只有一个 id 和一个名字。下面我循环遍历它，添加复选框列表工作正常。

我还有另一个类似的，但 json 列表更短，并且代码相同，所以这不是 json 的问题，而是我编写 js 代码的方式的问题。

我正在执行以下操作。

为 obj.people 中的每个人创建复选框和标签...

var peopleLen = obj.People.length;
for (var i = 0; i < peopleLen; i++) {
    if (i < obj.People.length) {
        checkbox = null;
        label = null;
        linebreak = null;

        linebreak = document.createElement('br');
        checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = "target";
        checkbox.value = obj.People[i].ID;
        checkbox.id = "cbTarget" + i.toString();
        label = document.createElement('label');
        label.id = "lbTarget" + i.toString();
        label.htmlFor = "cbTarget" + i.toString();
        //This is where I believe it's wrong:
        checkbox.onclick = function () {
            toggleTargetList(obj.People[i].ID);
        };
        label.appendChild(document.createTextNode('\u00A0\u00A0' + obj.People[i].Name));

        document.getElementById("divcbTargets").appendChild(checkbox);
        document.getElementById("divcbTargets").appendChild(label);
        //Add a line break:
        document.getElementById("divcbTargets").appendChild(linebreak);
    }
}

我分配给它的功能是:

function toggleTargetList(t) {
    alert(t);
}

一个简单的警报。

当我改变时:

toggleTargetList(obj.People[i].ID);

致:

toggleTargetList(obj.People[0].ID);

它会警告正确显示第一个人的 ID，但是当它是 [i] 时，它会警告相同的值(json 对象的人员 id 属性的第一个值)。

我不明白为什么会这样。

它会在分配复选框属性时发出警报，而不是在单击实际复选框时发出警报，这是另一个问题。

Answer 1

checkbox.onclick = function () {
            toggleTargetList(obj.People[i].ID);
        };

变量i超出了回调函数的范围。方便的是，您已经将 obj.People[i].ID 的值分配给复选框 .value 属性。

checkbox.value = obj.People[i].ID;

所以只需这样使用:

checkbox.onclick = function(event) {
  toggleTargetList(event.target.value);
};