Как динамически добавлять флажки с Javascript

Question

Попытка вставить динамические флажки и элементы коллекции с сайта Materializecss в мой html, используя document.createElement () (столько же флажков, сколько моих имен в цикле - у каждого имени должен быть свой флажок).

Мои вопросы:

1) Работает с коллекциями, но флажки не отображаются на боковой панели (см. Код внизу).

2) Нужен ли другой идентификатор и атрибуты For для каждого флажка?

3) Я хочу использовать значения, полученные из флажков и соответствующих им имен. Для этого я должен поместить имена в <span> флажок здесь:

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

Но я хочу сохранить имена в тегах этой коллекции, а не в тегах флажков, потому что а) это выглядит великолепно б) я хочу, чтобы ссылки на имена были такими же, как сейчас.

 <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 требует элемент метки для переноса ввода и диапазона, я не думаю, что ваш javascript делает это, https://materializecss.com/checkboxes.html

2. Да, вам нужны разные идентификаторы и атрибуты для каждого флажка, я предлагаю использовать i в вашем цикле for для создания идентификатора, 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:

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

Только линии сбора стали слишком широкими, поскольку флажки не могут входить в область ссылок), а область ссылок занимает всю строку.Кто знает, как сделать их всех в один ряд и узкими?