JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-horizontal">
<fieldset>


<!-- Multiple Checkboxes -->
<div class="control-group">
  <label class="control-label">Multiple Checkboxes</label>
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Load">
      Load
    </label>
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Unload">
      Unload
    </label>
  </div>
</div>

<!-- Show when "load" is checked -->
<div class="control-group load">
  <label class="control-label">Dorms</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Degraff</option>
    </select>
  </div>
</div>

<!-- Show when "load" is checked -->
<div class="control-group load">
  <label class="control-label">Greek House</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Tri Delt</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div class="control-group unload">
  <label class="control-label">How many hops?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
      <option>Four</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div class="control-group unload">
  <label class="control-label">How many hours?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
    </select>
  </div>
</div>

</fieldset>
</form>

CSS

.load
{
    display:none;
}
.unload
{
    display:none;
}

JavaScript

$(':checkbox[value=Load]').change(function(){
    $('.load').toggle();
});
    $(':checkbox[value=Unload]').change(function(){
      $('.unload').toggle();
});