How to create list of checkboxes dynamically with javascript

Question

UPDATE: Code has been updated per Dan's comments. I have a problem with a project I'm working on. I need to create a list of checkboxes depending on what is selected in a select dropdown above. I would like to use javascript for this. I was able to create a select dropdown dependent on the select above but the client wants checkboxes instead. I figured it would be essentially done the same way, except making checkboxes this time, but I can't get it to work. I usually use php for my programing and therefore don't know javascript too well. Here is the code I have to make the select dropdown.... what would be the best way to make it a list of checkboxes instead? Please note that this code has been greatly reduced to keep it easy to read (only the parts that matter are here). Code: ```

Accepted Answer

A checkbox is a simple input element with `type='checkbox'`. So you have to prepare at least two things: a text node for the description of the box and the box itself. In this case it's also good to use a `` element to include both things mention before: ``` // create the necessary elements var label= document.createElement("label"); var description = document.createTextNode(pair); var checkbox = document.createElement("input"); checkbox.type = "checkbox"; // make the element a checkbox checkbox.name = "slct[]"; // give it a name we can check on the server side checkbox.value = pair; // make its value "pair" label.appendChild(checkbox); // add the box to the element label.appendChild(description);// add the description to the element // add the label element to your div document.getElementById('some_div').appendChild(label); ``` You have to do the steps above for every pair. Note that you have to clear the given `

` before you populate it: ``` // clear the former content of a given

document.getElementById('some_div').innerHTML = ''; ```

How to create list of checkboxes dynamically with javascript

Solution

Problem