How to create list of checkboxes dynamically with javascript
Solution 1
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 <label>
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 <div id="some_div"></div>
before you populate it:
// clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';
Solution 2
The process of creating a checkbox dynamically is indeed a little more involved than creating a select option. You need to create:
- the checkbox
- its label
- and possibly a
<br>
for styling
Here's the gist of the code, with the full fiddle at http://jsfiddle.net/dandv/9aZQF/2/:
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
s2.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s2.appendChild(label);
s2.appendChild(document.createElement("br"));
}
}
![GeoffCodesThings](https://i.stack.imgur.com/fbeQE.jpg?s=256&g=1)
GeoffCodesThings
I am a freelance website designer and developer.
Updated on November 12, 2020Comments
-
GeoffCodesThings over 3 years
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:
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function populate(slct1,slct2){ var s1 = document.getElementById(slct1); var s2 = document.getElementById(slct2); s2.innerHTML = ""; if(s1.value == "Cat1"){ var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"]; } else if(s1.value == "Cat2"){ var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"]; } else if(s1.value == "Cat3"){ var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"]; } for(var option in optionArray){ if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var newOption = document.createElement("option"); newOption.value = pair; newOption.innerHTML = pair; s2.options.add(newOption); } } } </script> </head> <body> <h2>Dynamic Select Dropdown</h2> <hr /> Choose a Category: <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> <option value=""></option> <option value="Cat1">Cat1</option> <option value="Cat2">Cat2</option> <option value="Cat3">Cat3</option> </select> <hr /> Choose Subcategory: <select id="slct2" name="slct2"></select> <hr /> </body> </html>
Any help would be greatly appreciated and I would try my best to repay the favor if you ever needed help with any development.
-
GeoffCodesThings over 11 yearsI would vote this up, but I don't have 15 reputation. But I did mark it as the answer. Thank you for the help. It works very well. I had tried something similar but couldn't get it to work. I guess my syntax was wrong at first. Either way, you got to work, and I thank you. Now I can sleep and finish up in a few hours.
-
Zeta over 11 years@stereoscience: You're welcome. Just a further remark: Don't use a
for( x in object)
loop for arrays. Instead usefor(i = 0; i < array.length; ++i)
. See also the remark in the description on MDN. -
GeoffCodesThings over 11 yearsThanks for the input. I had already seen Zeta's answer which worked. But I did add the line br that you suggested to make it look nicer.
-
GeoffCodesThings over 11 yearsI will remember that and give it a shot.
-
Zuwaib Ansari almost 5 yearsHere 'pair' is a user-defined variable. Pass the text for checkbox in it.