title: show and hide div based on checkbox selection using javascript
body: <p>Hi I have a requirement for hiding and displaying the division based on checkbox selection. Currently I have to show and hide 10 division and 10 checkbox is provided for that. Also there should be on checkbox selet all which will check all the checkbox and all 10 div should be displayed. Once user will click select all it should now change to deselect all to deselect all.Once de select all is clicked it will deselect all checkbox and no division should be displayed. Kindly provide me javascript solution not jquery.
  Here is the code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  var checkflag = "false";
  function check(field) {
    if (checkflag == "false") {
      for (i = 0; i &lt; field.length; i++) {
        field[i].checked = true;
      }
      checkflag = "true";
      return "Uncheck All";
    } else {
      for (i = 0; i &lt; field.length; i++) {
        field[i].checked = false;
      }
      checkflag = "false";
      return "Check All";
    }
  }
  
  function ShowHideDiv(chkPassport) {
          var dvPassport = document.getElementById("dvPassport");
          dvPassport.style.display = chkPassport.checked ? "block" : "none";
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name=myform action="" method=post&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Make a selection&lt;/strong&gt;&lt;br&gt; &lt;input
                      type=checkbox name=list id="chkPassport"
                      onclick="ShowHideDiv(this)" value="1"&gt;Java&lt;br&gt; &lt;input
                      type=checkbox name=list value="2"&gt;JavaScript&lt;br&gt; &lt;input
                      type=checkbox name=list value="3"&gt;ASP&lt;br&gt; &lt;input
                      type=checkbox name=list value="4"&gt;HTML&lt;br&gt; &lt;input
                      type=checkbox name=list value="5"&gt;SQL&lt;br&gt; &lt;br&gt; &lt;input
                      type=button value="Check All"
                      onClick="this.value=check(this.form.list)"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="dvPassport" style="display: none"&gt;
              Passport Number: &lt;input type="text" id="txtPassportNumber" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>