如何使用Javascript动态添加复选框

Question

尝试使用document.createElement（）将 Materializecss网站中的动态复选框和集合元素插入到我的html中（与循环中与我的名字一样多的复选框-每个名称都应具有自己的复选框）。

我的问题：

1）它适用于收藏集，但复选框未出现在我的侧边栏中（请参阅底部的代码）。

2）我是否需要为每个复选框使用不同的ID和For属性 ？

3）我想使用从复选框和对应名称获得的值。 为此，我必须将名称放在复选框的<span>标记中：

    <label>
    <input type="checkbox" class="filled-in" checked="checked" />
    <span>Filled in</span>
    </label>

但是我想将名称保留在此Collection标签中，而不是在复选框标签中，因为a）看起来不错b）我想以现在拥有的方式在名称上链接。

 <div class="collection">
    <a href="#!" class="collection-item">Alvin</a>
  </div>

问题是我可以从2个不同的元素中读取对应的值吗？

 //collection element from Materializecss site var collection = document.getElementById("coll") //form element from Materializecss site var form = document.getElementById("form") for (var i = 0; i < names.length; i++) { //getting each name var name = names[i] //creates a label tag for each checkbox var newLabelTag = document.createElement("LABEL") newLabelTag.setAttribute("for", "item"); //add item to the mother collection element form.appendChild(newLabelTag); //creates a span tag for each checkbox var newSpanTag = document.createElement("SPAN") // Add names to it var Text = document.createTextNode(name); //new line var br = document.createElement("BR"); newSpanTag.appendChild(br); //append the text with names to the tag newSpanTag.appendChild(Text); //add item to the mother collection element form.appendChild(newSpanTag); //creating a new <input> tag var newInputTag = document.createElement("INPUT") //set a class to a new tag newInputTag.setAttribute("class", "filled-in"); newInputTag.setAttribute("id", "item"); newInputTag.setAttribute("type", "checkbox"); //add item to the mother collection element form.appendChild(newInputTag); //creating a new <a> tag (Collection items) var newATag = document.createElement("A") //set a class to a new tag newATag.setAttribute("class", "collection-item"); // add the URL attribute newATag.setAttribute("href", "https//blah"); // Add names to it var newText = document.createTextNode(name); //append the text with names to the tag newATag.appendChild(newText); //add item to the mother collection element collection.appendChild(newATag); } 

Answer 1

1. Materializecss需要一个label元素来包装输入和范围，我认为您的JavaScript并不这样做， https：//materializecss.com/checkboxes.html

2. 是的，您需要不同的id和每个复选框的属性，我建议在for循环中使用i创建id setAttribute（“ id”，“ item_” + i）;

3. 当您询问读取值时，我假设您的意思是提交表单时在服务器端？ 提交表单时，您将需要2个输入才能读取2个值，也可以考虑使用隐藏输入

格式提示：在createElement中使用小写

Answer 2

我主要是修复它。 删除了所有用于创建复选框的长行，并将其替换为克隆原始元素的几行：

             //cloning the original checkbox, true for cloning child tags
             var checkbox = document.getElementById("check").cloneNode(true)

             //setting unique IDs
             checkbox.setAttribute("id", "check" + i);

             //appending it to the form
             collection.appendChild(checkbox);


             //after cloning the checkboxes hide the first model of checkbox
             var checkbox1 = document.getElementById("check")
             checkbox1.style = "display:none"

因此，我从Materializecss的此Collection元素中插入了复选框：

<div class="collection">
<a href="#!" class="collection-item">Alvin</a>
</div>

只有收集行变得太宽，因为复选框无法进入链接区域内），并且链接区域占据了所有行。 谁知道如何使它们成排并缩小？