如何使用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>

只有收集行變得太寬，因為復選框無法進入鏈接區域內），並且鏈接區域占據了所有行。 誰知道如何使它們成排並縮小？