title: hiding div having dropdown based on radio button selection knockoutjs
body: <p>I am working on KnockoutJS  where i want to hide and show divs having dropdowns  based on radio button selection, however i am succesful doing it if div does not contain dropdown,
  please find the link to JSFiddle <a href="http://jsfiddle.net/3z2n8LLa/" rel="nofollow">http://jsfiddle.net/3z2n8LLa/</a></p>
  
  <p>here when you initially select "Requirement exists" i am showing a div, but when you select any radio button among "Area,Monitor,Other" i want to do the same thing but it works only for first dropdown..</p>
  
  <p>please find the code below</p>
  
  <pre><code>    &lt;div class="adminFieldsetContainer" id="RequirementsMain"&gt;
      &lt;div&gt;
          &lt;label class="fieldSetControl label" for="RequirementsExist"&gt;Requirements exist?:&lt;span class="styleColorRed"&gt;*&lt;/span&gt;
          &lt;/label&gt;
          &lt;div class="inline"&gt;
              &lt;input type="radio" name="RequirementsExist" value="Yes" data-bind="checked: RequirementsExist" /&gt;Yes&lt;/div&gt;
          &lt;div class="inline"&gt;
              &lt;input type="radio" name="RequirementsExist" value="No" data-bind="checked: RequirementsExist" /&gt;No&lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-bind="visible: (RequirementsExist() == 'Yes')"&gt;
          &lt;div&gt;
              &lt;label class="fieldSetControl label" for="Experience"&gt;Experience Category:&lt;span class="styleColorRed"&gt;*&lt;/span&gt;
              &lt;/label&gt;
              &lt;div class="inline"&gt;
                  &lt;input type="radio" name="Experience" value="Area" data-bind="checked: Experience" /&gt;Area&lt;/div&gt;
              &lt;div class="inline"&gt;
                  &lt;input type="radio" name="Experience" value="Monitor" data-bind="checked: Experience"&gt;Monitor&lt;/div&gt;
              &lt;div class="inline"&gt;
                  &lt;input type="radio" name="Experience" value="Other" data-bind="checked: Experience"&gt;Other&lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-bind="visible: (Experience() == 'Area')"&gt;
              &lt;p&gt;
                  &lt;select class="fieldsetLabelWIdthBigger" id="optionTherapeuticArea" data-bind="options: therapeuticArea"&gt;&lt;/select&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div data-bind="visible: (Experience() == 'Monitor')"&gt;
              &lt;p&gt;
                  &lt;select class="fieldsetLabelWIdthBigger" id="optionTherapeuticArea" data-bind="options: therapeuticArea"&gt;&lt;/select&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div data-bind="visible: (Experience() == 'Other')"&gt;
              &lt;p&gt;Other&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>viewmodel code</p>
  
  <pre><code>function ViewModel() {
      var self = this;
      self.RequirementsExist = ko.observable();
      self.Experience = ko.observable();
      self.JobRole = ko.observable();
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>help would be appreciated,</p>