title: html drop-down change value when checkbox is selected
body: <p>here is updated version am stuck.</p>
  
  <pre><code>&lt;base href="http://skins4device.com"/&gt;
  &lt;link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;fieldset&gt;
  
  &lt;form id="processContactUs" name="processContactUs" action="/send_form_email.php" method="POST"&gt;
  
  &lt;div&gt;
  
  
  &lt;label for="firstName"&gt;First name&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input id="firstName" name="firstName" value="" type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
  
  
  &lt;label for="lastName"&gt;Surname&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input id="lastName" name="lastName" value="" type="text"&gt;
  &lt;/div&gt;
  &lt;div class="option"&gt;
  
  &lt;label for="gender"&gt;Model&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;div class="gender radio-pair"&gt;
  &lt;span&gt;&lt;input id="gender1"  name="checkdrop" class="checkdrop" value="Ghd" onClick="ckChange(this)" type="checkbox"&gt;&lt;label 
  
  for="gender1" onClick="ckChange(this)" &gt;Ghd&lt;/label&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;input id="gender2" name="checkdrop" class="checkdrop" value="Hair" onClick="ckChange(this)" type="checkbox" &gt;&lt;label 
  
  for="gender2"&gt;Hair Dryer&lt;/label&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
  
  &lt;label for="email"&gt;Your email&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input id="email" name="email" value="" type="email"&gt;
  &lt;/div&gt;
  
  
  
  
   &lt;div class="answer"&gt;&lt;label for="dropdown" class="answer"&gt;Model&lt;/label&gt;
    &lt;select id="Ghd" name="dropdown" checked class="dropdown"&gt;
      &lt;option&gt;Ghd Mk5.0&lt;/option&gt;
   &lt;option&gt;sweets&lt;/option&gt;
  &lt;option&gt;candies&lt;/option&gt;
  &lt;option&gt;choclate&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="answer"&gt;&lt;label for="dropdown" class="answer"&gt;Model&lt;/label&gt;
    &lt;select id="Hair" name="dropdown" class="dropdown"&gt;
      &lt;option&gt;toys&lt;/option&gt;
      &lt;option&gt;games&lt;/option&gt;
      &lt;option&gt;cartoons&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  
  
  
  
  &lt;div class="opts"&gt;
  &lt;p&gt;Please enter your ghd order number where possible&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="textbox"&gt;
  
  
  &lt;label for="query"&gt;
                              Your query&lt;span class="required"&gt;*&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;textarea id="query" name="query"&gt;&lt;/textarea&gt;
  
                      &lt;/div&gt;
                      &lt;div class="opts"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="buttons"&gt;
                          &lt;input name="contactUs" value="Submit" type="submit"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;&lt;/fieldset&gt;
  
              &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $('input[name=checkdrop]').click(function() {
    if (this.checked) {
      console.log(this.value);
      $('#' + this.value).parent().show();
    } else {
      $('#' + this.value).parent().hide();
    }
  });
  &lt;/script&gt;
  &lt;script&gt;
  function ckChange(ckType){
      var ckName = document.getElementsByName(ckType.name);
      var checked = document.getElementById(ckType.id);
  
      if (checked.checked) {
        for(var i=0; i &lt; ckName.length; i++){
  
            if(!ckName[i].checked){
                ckName[i].disabled = true;
            }else{
                ckName[i].disabled = false;
            }
        } 
      }
      else {
        for(var i=0; i &lt; ckName.length; i++){
          ckName[i].disabled = false;
        } 
      }    
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function valueChanged()
  {
      $(".answer").hide();
  $(".checkdrop").click(function() {
      if($(this).is(":checked")) {
          $(".answer").show();
      } else {
          $(".answer").hide();
  
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>now  when i load the page the 2 dropdown box is visible on page load and it requires to click the checkbox on/off to remove then show it , how do i remove the dropdown on page load</p>