使用 Javascript 创建复选框答案

【问题标题】：Create Checkbox with Javascript使用 Javascript 创建复选框
【发布时间】：2018-01-02 00:58:35
【问题描述】：

我正在尝试在单击按钮时使用 javascript 创建一个复选框。我真的很挣扎，我已经在网上搜索了帮助，这是我得到的最接近的但它不起作用。

我做错了什么？

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="check" name="checkBoxes">
<script>
function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array( )
    check_value[0] = "Yellow"
    check_value[1] = "Red"
    check_value[2] = "Green"


   for(var count in check_value)
    {
      var color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      ColorsAvailable.appendChild(color);
   }
}

</script>

【问题讨论】：

标签： javascript html checkboxlist

【解决方案1】：

在您添加一个具有id 或checkBoxes 和一些分号; 的元素后，代码实际上可以工作。

function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array();
    check_value[0] = "Yellow";
    check_value[1] = "Red";
    check_value[2] = "Green";

    var color, p, br;

   for(var count in check_value)
    {
      color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      p =document.createElement("span");
      p.innerHTML = check_value[count] + ": ";
      br =document.createElement("br");
      ColorsAvailable.appendChild(p);
      ColorsAvailable.appendChild(color);
      ColorsAvailable.appendChild(br);
   }
}

input[type='checkbox']
{
   margin-right:20px;
}

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="check" name="checkBoxes">

<div id="checkBoxes"></div>

【讨论】：

太棒了！一些小改动 :) 复选框出现在同一行并且没有可见的文本（即黄色、红色、绿色），因此他们知道复选框的用途......任何建议
@Nadine 好的，我进行了编辑以显示标签。我还在复选框上添加了一个margin-right，以提高可读性。
@Nadine 你想让复选框一个接一个地出现吗？如果是这样，这很容易解决。
@Ivan86 谢谢你，是的，我确实希望他们一个在另一个之上。
@Ivan86。正是我所追求的。谢谢

【解决方案2】：

输入的 id 是 check 而不是 checkBoxes。我改变了它，你也不能直接附加在输入中，所以我把它附加在父节点中，但你可以改变到另一个地方。

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="checkBoxes" name="checkBoxes">
<script>
function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array( )
    check_value[0] = "Yellow"
    check_value[1] = "Red"
    check_value[2] = "Green"


   for(var count in check_value)
    {
      var color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      ColorsAvailable.parentNode.appendChild(color);
   }
}

</script>

【讨论】：

【解决方案3】：

将复选框设为 DIV。

<div id="check" name="checkBoxes"></div>

然后改变这个

var ColorsAvailable = document.getElementById('check');

【讨论】：