在JavaScript中动态创建复选框

create checkboxes dynamically in JavaScript

本文关键字：创建 复选框 动态 JavaScript      更新时间：2023-09-26

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

$.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;
  }
});

感谢

您似乎从未将那些动态创建的复选框附加到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>

正如Darin所说，

您需要将一个动态创建的元素附加到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，并将您的复选框附加到该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);
    }
});

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

<div id="append" name="append">Append here</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);
      }
});
相关文章：