javascript - 在 JavaScript 中动态创建复选框

Question

我正在尝试动态创建复选框。但是我不知道这段代码有什么问题。有人请帮助。如果您需要更多详细信息，请发表评论。

$.getJSON(url, function(json) {
  console.log(json);
  console.log(json.items.length);

  for (var i = 0; i < json.items.length; i++) {

    console.log(json.items[i].name);

    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = "name" + json.items[i].name;
    checkbox.value = "value";
    checkbox.id = "id" + i;
  }
});

谢谢

Answer 1

您似乎永远不会将那些动态创建的复选框附加到您的 DOM，因此您在循环内创建的这个 checkbox 变量只会被垃圾收集。如果您希望这些复选框出现在某处，请确保您确实将它们添加到 DOM:

document.body.appendChild(checkbox);

当然，除了简单地将它们附加到 DOM 的 body 之外，您可能还想将它们附加到某个特定元素，在这种情况下，您可能需要先获取该元素:

var someDiv = document.getElementById('someId');
someDiv.appendChild(checkbox);

或者如果您使用的是 jQuery:

for (var i = 0; i < json.items.length; i++) {
    $('<input />', {
        type : 'checkbox',
        id: 'id' + i,
        name: 'name' + json.items[i].name,
        value: 'value'
    })
    .appendTo("#someId"); 
}

你显然有相应的容器来容纳那些新添加的元素:

<div id="someId"></div>