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>

Answer 2

达林说的话，

您需要将动态创建的元素附加到DOM。所以在你的情况下

        $.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;   
        document.body.appendChild(checkbox);
        }
    });

或者你可以在你的HTML表格中创建一个div，并将你的复选框附加到那个，所以它就像是......

   var div = document.getElementById('div');
   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;   
    div.appendChild(checkbox);
    }
});

Answer 3

您需要在某个html容器中添加复选框。假设您有一个ID为append的div，如下所示，

<div id="append" name="append">Append here</div>

并将动态创建的复选框添加到该div。

<强> JS：

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

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

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

      }
});

在JavaScript中动态创建复选框

3 个答案: