title: I need to print the values from a checkbox to the page in HTML using Javascript
body: <p>I need the checkbox values to print on to the page when the submit button is pressed. As I have it now it will only print one value from the checkbox no matter how many are checked. The checkbox is the region.</p>
  
  <p>I'm not sure where to go from here, so any help is appreciated, thanks.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function checkform () {
  info = document.getElementById("personalInfo");
      info.innerHTML = "&lt;strong&gt;Peronal Info: &lt;/strong&gt;" + "&lt;br&gt;" + "Name: " + 
                      document.feedback.fname.value +
                      " " +
                      document.feedback.lname.value +
                      "&lt;br&gt;" + "Email: " +
                      document.feedback.email.value;
  
      info = document.getElementById("experienceSubmit");
  
      var compensationValue,regionValue;
      //Get compensation value
      for(var i=0;i&lt;document.feedback.comp.length;i++){
          if(document.feedback.comp[i].checked){
          compensationValue = document.feedback.comp[i].value;
      }
  }
      //Get region value
      for(var i=0;i&lt;document.feedback.region.length;i++){
          if(document.feedback.region[i].checked){
          regionValue = document.feedback.region[i].value;        
      }
  }
  
  
  info = document.getElementById("otherSubmit");
      info.innerHTML = "&lt;strong&gt;Other information: &lt;/strong&gt;" + "&lt;br&gt;" + "# of References " + 
                      document.feedback.reference.value +
                      "&lt;br&gt;" + "Additional Comments: " +
                      document.feedback.comments.value; 
  return false;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" &gt;
  &lt;form   name="feedback" method="post" onSubmit="return checkform()"&gt;
          &lt;section  id="pinfo" class="inputArea"&gt;
          &lt;fieldset&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Last Name: &lt;/td&gt;
                      &lt;td&gt;&lt;input name="lname"
                                 type="text"
                                 autofocus
                                 required
                                 placeholder="lname"                               
                                 size="25" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;                   
                  &lt;tr&gt;
                      &lt;td&gt;First Name: &lt;/td&gt;
                      &lt;td&gt;&lt;input name="fname"
                                 type="text"
                                 size="25"
                                 required
                                 placeholder="fname" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Email: &lt;/td&gt;
                      &lt;td&gt;&lt;input name="email"
                                 type="email"
                                 size="40"
                                 required
                                 placeholder="....@hotmail.com" /&gt;
                       &lt;/td&gt;
                  &lt;/tr&gt;
                      &lt;td&gt;Gender: &lt;/td&gt;
                      &lt;td&gt;&lt;select name="gender"&gt;
                              &lt;option selected disabled style='display:none;'&gt;
                              Gender&lt;/option&gt;                         
                              &lt;option value="Male"&gt;Male&lt;/option&gt;
                              &lt;option value="Female"&gt;Female&lt;/option&gt;                      
                          &lt;/select&gt;
  
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;/fieldset&gt;
  &lt;/section&gt;
  &lt;section id="experience"&gt;
              &lt;fieldset&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                      &lt;label for="experience"&gt;Years of Experience: &lt;/label&gt;
                      &lt;input name="experience" type="number" /&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="date"&gt;Date&lt;/label&gt;
                          &lt;input name="date" type="date" /&gt;
                      &lt;/td&gt;
                &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="comp"&gt;Compensation: &lt;/label&gt;&lt;br&gt;
                          &lt;input name="comp" type="radio" id="Salary" value="Salary Selected"&gt;Salary &amp;nbsp;
                          &lt;input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected"&gt;Salary with Bonus &amp;nbsp;
                          &lt;input name="comp" type="radio" id="Commission" value="Commission Selected"&gt;Commission &amp;nbsp;
                      &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                      &lt;label for="region"&gt;Region: &lt;/label&gt;&lt;br&gt;
                      &lt;input name="region" type="checkbox" id="East" value="East Selected"&gt;East &amp;nbsp;
                      &lt;input name="region" type="checkbox" id="West" value="West Selected"&gt;West &amp;nbsp;
                      &lt;input name="region" type="checkbox" id="North" value="North Selected"&gt;North &amp;nbsp;
                      &lt;input name="region" type="checkbox" id="South" value="South Selected"&gt;South &amp;nbsp;
                  &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/fieldset&gt;
  &lt;/section&gt;
  &lt;section id="other"&gt;
  &lt;fieldset&gt;
            &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                  &lt;label for="reference"&gt;References&lt;br&gt;0&amp;nbsp;&amp;nbsp 1 &amp;nbsp;&amp;nbsp 2 &amp;nbsp&amp;nbsp 3 &amp;nbsp&amp;nbsp 4 &amp;nbsp&amp;nbsp 5&lt;br&gt;&lt;/label&gt;
              &lt;input name="reference" id="reference"
                      type="range" 
                      value="0"
                      min="0"
                      max="5"
                      step="1" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;label for="comments"&gt;Additional Comments: &lt;br&gt;&lt;/label&gt;
                      &lt;textarea 
                      name="comments"
                      rows="5" 
                      cols="20" 
                      placeholder="Please include any other pertinent information here"&gt;&lt;/textarea&gt;                   &lt;/td&gt;
              &lt;/tr&gt;          
            &lt;/table&gt;          
  &lt;/fieldset&gt;
  
          &lt;input type="submit" value="Submit" /&gt;
          &lt;input type="reset" value="Clear" /&gt;
  &lt;/section&gt;
  &lt;/form&gt;
  &lt;section id="personalInfo"&gt;&lt;/section&gt;
  &lt;section id="experienceSubmit"&gt;&lt;/section&gt;
  &lt;section id="otherSubmit"&gt;&lt;/section&gt;
  &lt;/body&gt;
  </code></pre>