Question

我有一大堆人，他们只有一个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对象的people的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);
};

Answer 2

尝试为

var obj = {
  People: [{
    ID: 1,
    name: 'Manish'
  }, {
    ID: 2,
    name: 'Manish'
  }, {
    ID: 3,
    name: 'Manish'
  }, {
    ID: 4,
    name: 'Manish'
  }, {
    ID: 5,
    name: 'Manish'
  }]
};

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.id = "cbTarget" + i.toString();

    // I have added this code
    checkbox.ID = obj.People[i].ID;
    checkbox.onclick = function() {
      toggleTargetList(this.ID);
    };

    label = document.createElement('label');
    label.id = "lbTarget" + i.toString();
    label.innerText = "cbTarget" + i.toString();
    label.appendChild(document.createTextNode('\u00A0\u00A0' + obj.People[i].name));

    document.getElementById("divcbTargets").appendChild(checkbox);
    document.getElementById("divcbTargets").appendChild(label);
    document.getElementById("divcbTargets").appendChild(linebreak);
  }
}

// I have added this code
function toggleTargetList(index) {
  alert(index);
}

<div id="divcbTargets"></div>

此外，您可以为此进行类似的onchange事件。

如何将onchange属性添加到JavaScript生成的复选框，该复选框在选中/未选中时会触发？

2 个答案: