How to add checkboxes with Javascript dynamically

Question

Trying to insert dynamic checkboxes and collection elements from Materializecss site to my html using document.createElement() (as many checkboxes as my names in a loop - each name should have own checkbox).

My questions:

1) It works with collections but checkboxes do not appear in my sidebar (see the code in the bottom).

2) Do I need a different ID and For attributes for each checkbox?

3) I want to use values gotten from checkboxes and correspondent names. For that I have to place names in a <span> tag of checkboxes here:

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

But I want to keep names in this Collection tags rather than in checkboxes tags because a) it looks great b) I want to have links on names in a way I have now.

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

The question is will I be able to read corresponding values from 2 different elements?

             
            //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);

    }

To answer one question: ID should be unique on the page, so it should never be duplicated not even more than one checkbox should have the same ID. And the "For" attribute goes on the label for that checkbox and should match that checkbox's ID. — imvain2
– imvain2, Commented Mar 29, 2019 at 19:01
Thank you for the advice. I can use setAttribute("for", i) and setAttribute("id", i) when looping for that. Can somebody please help with 1-st question especially?) What's wrong with my code here? — kiki
– kiki, Commented Mar 29, 2019 at 19:16
It would be better to limit a question to one question really. — trincot
– trincot, Commented Mar 29, 2019 at 19:27
You can check out this post. stackoverflow.com/questions/1950939/… — Oluwaseye
– Oluwaseye, Commented Mar 29, 2019 at 19:50
Update: the input element works and I can see it in a sidebar when I remove the line newInputTag.setAttribute("type", "checkbox") or newInputTag.type = "checkbox". Then I can see it as a TEXT INPUT (a line where you can type text) ! So it doesn't receive that I am stating that it should be a checkbox! Though I use same phrasing as on the site. Who knows what to do? — kiki
– kiki, Commented Mar 29, 2019 at 20:56

Blue · Accepted Answer · 2019-03-29 20:03:30Z

2

Materializecss requires a label element to wrap an input and span, I don't think your javascript does this, https://materializecss.com/checkboxes.html
Yes, you need different id and for attributes for each checkbox, I suggest using the i in your for loop to create the id, setAttribute("id", "item_" + i);
When you ask about reading values, I assume you mean server side when form is submitted? You will need 2 inputs to read 2 values when form is submitted, consider using a hidden input too

Formatting tip: use lower case in createElement

edited Mar 29, 2019 at 20:03

answered Mar 29, 2019 at 19:42

Blue

486 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kiki Over a year ago

1) no they work outside a loop perfectly 2) agree 3) can you explain a bit more please?

kiki Over a year ago

When the button is clicked I am gonna run a function where I could get all checked checkboxes by their unique IDs + correspondent names. I am just not sure how to deal with them as the data will be in different tags. Need help please.

kiki · Accepted Answer · 2019-03-29 22:05:53Z

I mostly fixed it. Removed all that long lines for creating checkboxes and replaced it with just a few lines where I cloned the original element:

             //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"

So I inserted checkboxes into this Collection elements from Materializecss:

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

Only the collection lines became too wide because checkboxes cannot go inside a link area) and the link area takes all row. Who knows how to make them all in one row and narrow?

Collectives™ on Stack Overflow

How to add checkboxes with Javascript dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related