动态复选框列表不起作用

Dynamic checkbox list in not working

本文关键字：不起作用 列表 复选框 动态      更新时间：2023-09-26

当从下拉列表中选择某个元素时，我试图创建一个复选框列表。但是，在下面的代码中，我只获得复选框列表中的最后一个元素。也就是说，在输出中，没有3个复选框(我的数组长度)，但只有一个-只有数组中的最后一个元素。

我做错了什么?

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <script>
     function chooseTable(db) {

 if(db=="hr.employee"){
var div = document.getElementById("table"); 
var ids = ["id","name", "write_uid"];
var main = document.getElementById('main1');
var parentElement = document.getElementById('ids');
for(var count in ids)
{
    var newCheckBox = document.createElement('input');
    newCheckBox.type = 'checkbox';
    newCheckBox.id = 'id' + count; // need unique Ids!
    parentElement.innerHTML = ids[count];
    newCheckBox.value = ids[count];
    parentElement.appendChild(newCheckBox);
}
 }
 }

 </script>
  <center>
    <bold>
    <h2>
    Make Query
    </h2>
    </bold>
<div id="main1">
<div>
Choose database:<br/>
<select id="table" name="table" onchange="chooseTable(this.value)">
     <option name="choice" value=""></option>
    <option name="choice1" value="hr.employee">Employees</option>
    <option name="choice2" value="account.account">Accounts</option>
  </select>
</div>  
<div id="ids">
</div>
</div>
</center>
  </body>
</html>

问题是parentElement.innerHTML = ids[count];代码。它清除所有以前的html内容。为了给复选框添加标签，最好使用label tag。试试这个:

for(var count in ids)
{
    var newCheckBox = document.createElement('input');
    newCheckBox.type = 'checkbox';
    newCheckBox.id = 'id' + count; // need unique Ids!
    newCheckBox.value = ids[count];
    parentElement.appendChild(newCheckBox);
    var newLabel = document.createElement('label');
    newLabel.innerHTML = ids[count];
    parentElement.appendChild(newLabel);
}

因为innerHTML方法会清理自己的内部并重写新元素。
试试这个怎么样?

for(var count in ids)
            {
                var newCheckBox = document.createElement('input');
                var newSpan = document.createElement('span');
                newCheckBox.type = 'checkbox';
                newCheckBox.id = 'id' + count; // need unique Ids!
                newSpan.innerHTML = ids[count];
                newCheckBox.value = ids[count];
                parentElement.appendChild(newSpan);
                parentElement.appendChild(newCheckBox);
            }
相关文章：