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:

<!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.

Note that for(var option in optionArray) will include the native properties of optionArray as well, which you don't want. See hasOwnProperty. jsfiddle.net/dandv/9aZQF — Dan Dascalescu
– Dan Dascalescu, Commented Nov 11, 2012 at 10:26
Thanks Dan. I updated the code to reflect your input. Any idea on how to do what I need to do to solve my main problem? — GeoffCodesThings
– GeoffCodesThings, Commented Nov 11, 2012 at 10:37

Zeta · Accepted Answer · 2012-11-11 10:38:55Z

18

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 = '';

answered Nov 11, 2012 at 10:38

Zeta

106k13 gold badges206 silver badges250 bronze badges

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

4 Comments

GeoffCodesThings Over a year ago

I 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 a year ago

@stereoscience: You're welcome. Just a further remark: Don't use a for( x in object) loop for arrays. Instead use for(i = 0; i < array.length; ++i). See also the remark in the description on MDN.

GeoffCodesThings Over a year ago

I will remember that and give it a shot.

Zuwaib Ansari Over a year ago

Here 'pair' is a user-defined variable. Pass the text for checkbox in it.

Dan Dascalescu · Accepted Answer · 2012-11-11 10:39:42Z

11

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"));    
    }
}

answered Nov 11, 2012 at 10:39

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

1 Comment

GeoffCodesThings Over a year ago

Thanks 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.

Collectives™ on Stack Overflow

How to create list of checkboxes dynamically with javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related