Show/hide Form Contents Based On Radio Selections

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.

Solution 1:

I added some id attributes to your elements.

HTML

<form class="form-horizontal">
<fieldset><!-- Multiple Checkboxes --><divclass="control-group"><labelclass="control-label">Multiple Checkboxes</label><divclass="controls"><labelclass="checkbox"><inputtype="checkbox"name="checkboxes"value="Load">
      Load
    </label><labelclass="checkbox"><inputtype="checkbox"name="checkboxes"value="Unload">
      Unload
    </label></div></div><!-- Show when "load" is checked --><divid="dorms"class="control-group"><labelclass="control-label">Dorms</label><divclass="controls"><selectid="selectbasic"name="selectbasic"class="input-xlarge"><option>Degraff</option></select></div></div><!-- Show when "load" is checked --><divid="greek"class="control-group"><labelclass="control-label">Greek House</label><divclass="controls"><selectid="selectbasic"name="selectbasic"class="input-xlarge"><option>Tri Delt</option></select></div></div><!-- Show when "unload" is checked --><divid="hops"class="control-group"><labelclass="control-label">How many hops?</label><divclass="controls"><selectid="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 --><divid="hours"class="control-group"><labelclass="control-label">How many hours?</label><divclass="controls"><selectid="selectbasic"name="selectbasic"class="input-xlarge"><option>One</option><option>Two</option></select></div></div></fieldset></form>

jQuery

$("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();
        }
    });

CSS

#greek, #dorms, #hops, #hours{
    display:none;
}

Working Examplehttp://jsfiddle.net/cyTLm/

Solution 2:

Probably this is something that may provide you pointers on your need. You can explore more. I have made small changes in your html and using jquery(since you have tagged) and little css.

Check out the fiddle-

.toggle()

http://jsfiddle.net/kvaYG/

Jquery

$(':checkbox[value=Load]').change(function(){
    $('.load').toggle(); //This will get triggered during the checkbox change //i.e when you check or unckeck the checkbox. You can use element.toggle() //which will show and hide based on its last appearance whether it was shown or not. //This is a shortcut to using .show() and .hide()
});
    $(':checkbox[value=Unload]').change(function(){
      $('.unload').toggle();
});

Css

/*Initially hide all your sections*/.load
{
    display:none;
}
.unload
{
    display:none;
}