title: Show/hide form contents based on radio selections
body: <p>Im building a form that has conditional fields that need to show based on what checkboxes are selected. I want to know how I can hide other form fields when a checkbox is selected. I also want to be able to show all fields when both checkboxes are selected. </p>
  
  <p>In the markup below, I have added comments where I want to render the html. </p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
  &lt;fieldset&gt;
  
  
  &lt;!-- Multiple Checkboxes --&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;Multiple Checkboxes&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox" name="checkboxes" value="Load"&gt;
        Load
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox" name="checkboxes" value="Unload"&gt;
        Unload
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Show when "load" is checked --&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;Dorms&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;select id="selectbasic" name="selectbasic" class="input-xlarge"&gt;
        &lt;option&gt;Degraff&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Show when "load" is checked --&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;Greek House&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;select id="selectbasic" name="selectbasic" class="input-xlarge"&gt;
        &lt;option&gt;Tri Delt&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Show when "unload" is checked --&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;How many hops?&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;select id="selectbasic" name="selectbasic" class="input-xlarge"&gt;
        &lt;option&gt;One&lt;/option&gt;
        &lt;option&gt;Two&lt;/option&gt;
        &lt;option&gt;Three&lt;/option&gt;
        &lt;option&gt;Four&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Show when "unload" is checked --&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;How many hours?&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;select id="selectbasic" name="selectbasic" class="input-xlarge"&gt;
        &lt;option&gt;One&lt;/option&gt;
        &lt;option&gt;Two&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>