title: How to create list of checkboxes dynamically with javascript
body: <p>UPDATE: Code has been updated per Dan's comments.</p>
  
  <p>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).</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
      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);
      }
  }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2&gt;Dynamic Select Dropdown&lt;/h2&gt;
  &lt;hr /&gt;
  Choose a Category:
  &lt;select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"&gt;
     &lt;option value=""&gt;&lt;/option&gt;
     &lt;option value="Cat1"&gt;Cat1&lt;/option&gt;
     &lt;option value="Cat2"&gt;Cat2&lt;/option&gt;
     &lt;option value="Cat3"&gt;Cat3&lt;/option&gt;
  &lt;/select&gt;
  &lt;hr /&gt;
     Choose Subcategory:
  &lt;select id="slct2" name="slct2"&gt;&lt;/select&gt;
  &lt;hr /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated and I would try my best to repay the favor if you ever needed help with any development.</p>