Question

108

How to create list of checkboxes dynamically with javascript

rated 0 times [ 115] [ 7] / answers: 1 / hits: 73051 / 12 Years ago, sun, november 11, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susanajamiep

Add To Favorites

Follow

Total Points: 466

Total Questions: 113

Total Answers: 108

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

answered 12 Years ago raveno · 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 <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 = '';