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 id="dorms" class="control-group">
<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 id="greek" class="control-group">
<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 id="hops" class="control-group">
<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 id="hours" class="control-group">
<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
#greek, #dorms, #hops, #hours{
display:none;
}
JavaScript
$("input[value='Load']").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek").show();
}else{
$("#dorms, #greek").hide();
}
});
$("input[value='Unload']").click(function(){
if($(this).is(":checked")){
$("#hops, #hours").show();
}else{
$("#hops, #hours").hide();
}
});