How can i apply jquery to this web form?
<p>I've just started working with Jquery- find it very cool and easy. I have a small project that I would like to apply jquery to, but my code has just gotten ugly and long so am seeking help in to the following:</p>

<p>onload of this form I want to hide all the subsections, then when you select <strong>Flyer</strong> from the <strong>Type</strong> dropdown the <strong>Flyer</strong> fieldset section should appear. When you select <strong>Banner</strong> from the <strong>Type</strong> dropdown the <strong>Banner</strong> fieldset section should appear and all others disappear.</p>

<p>Now in the <strong>banner</strong> *<em>fieldset</em>*, if you select  "<strong>Size 1</strong>" <strong>checkbox</strong>, the Size 1 - Details fieldset should appear and so on.  </p>

<p>Could someone show me the cleanest, efficient way of accomplishing this with jquery?</p>

<pre><code>&lt;form action="" method="post"&gt;
&lt;fieldset name="fs_mainInfo"&gt;
                &lt;legend&gt;Main Info&lt;/legend&gt;

                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 255px"&gt;&lt;label id="Label1"&gt;First Name&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input id="fname" name="fname" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 255px"&gt;Last Name&lt;/td&gt;
                        &lt;td&gt;&lt;input id="lname" name="lname" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 255px"&gt;&lt;label id="Label2"&gt;Type&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;select id="jobType" name="jobType"&gt;
                        &lt;option value="Flyer"&gt;Flyer&lt;/option&gt;
                        &lt;option value="Banner"&gt;Banner&lt;/option&gt;
                        &lt;option value="Postcard"&gt;Postcard&lt;/option&gt;
                        &lt;/select&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 255px"&gt;&amp;nbsp;&lt;/td&gt;
                        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;
            &lt;fieldset name="fs_flyer" id="fs_flyer"&gt;
                &lt;legend style="color:blue"&gt;Flyer&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="Label1"&gt;Sizes:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt;
                        &lt;input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 2"  /&gt;Size 2&lt;br/&gt;
                        &lt;input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 3"  /&gt;Size 3&lt;br/&gt;
                                                &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;
&lt;fieldset name="fs_banner" id="fs_banner"&gt;
                &lt;legend   style="color:blue"&gt;Banner&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="lblBannerSize"&gt;Sizes:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt;
                        &lt;input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 2"  /&gt;Size 2&lt;br/&gt;
                        &lt;input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 3"  /&gt;Size 3&lt;br/&gt;
                                                &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;

&lt;fieldset name="fs_postcard" id="fs_postcard"&gt;
                &lt;legend  style="color:blue"&gt;Postcard&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="lblPostcardSize"&gt;Sizes:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 1" /&gt;Size 1&lt;br/&gt;
                        &lt;input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 2"  /&gt;Size 2&lt;br/&gt;
                        &lt;input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 3"  /&gt;Size 3&lt;br/&gt;
                                                &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;

&lt;fieldset name="fs_flyer_desc1" id="fs_flyer_desc1"&gt;
                &lt;legend  style="color:maroon"&gt;Size 1 - Details&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription"&gt;Description:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;textarea name="TextArea1" cols="30" rows="5"&gt;&lt;/textarea&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;
            &lt;fieldset name="fs_flyer_desc2" id="fs_flyer_desc2"&gt;
                &lt;legend  style="color:maroon"&gt;Size 2 - Details&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription2"&gt;Description:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"&gt;&lt;/textarea&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;
            &lt;fieldset name="fs_flyer_desc3" id="fs_flyer_desc3"&gt;
                &lt;legend style="color:maroon"&gt;Size 3 - Details&lt;/legend&gt;
                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 188px"&gt;&lt;label id="lblFlyerDescription3"&gt;Description:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"&gt;&lt;/textarea&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;

            &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>
