Advanced Search Form with Selection Box and Checkbox Groups

Hi there,

I'm hoping someone can help me. I've looked thru the forum posts and can't seem to find specifically what I'm looking for. But I am very new to chronoforms so I may have missed it.

I'm using Chronoforms v4 and joomla 1.7. Using Advanced Wizard. With Onload HTML load and JS Load.

My specific questions are how:

1. When a user selects Gym(from my code below) in the selection box. My checkbox group "Gym_options" appears below the selection box.
2. When the user selects Personal Trainer in the selection box the gym_options group will hide and the personatrainer_options checkbox group will show (And so on..)

Here is what I have so far.

HTML (From Advanced Wizard):

<div class="ccms_form_element cfdiv_select label_over" id="fit_finder_container_div"><label for="fit_finder">Fit Finder</label><select size="1" hide_label="0" id="fit_finder" class="" title="fit_finder" type="select" name="fit_finder">
<option value="">Select Option</option>
<option value="Gym">Gym</option>
<option value="Personal Trainer">Personal Trainer</option>
<option value="Sport">Sport</option>
</select>
<div class="clear"></div><div id="error-message-fit_finder"></div></div><div class="ccms_form_element cfdiv_checkboxgroup label_over" id="gym_options_container_div"><label for="gym_options">Gym Options</label><input type="hidden" name="gym_options" value="" alt="ghost" />
<input type="checkbox" name="gym_options[]" id="gym_options_all" title="gym_options" value="All" class="">
<label for="gym_options_all">All Inclusive</label>
<input type="checkbox" name="gym_options[]" id="gym_options_personaltraining" title="gym_options" value="Personaltraining" class="">
<label for="gym_options_personaltraining">Personal Training</label>
<input type="checkbox" name="gym_options[]" id="gym_options_pool" title="gym_options" value="Pool" class="">
<label for="gym_options_pool">Swimming Pool</label>
<input type="checkbox" name="gym_options[]" id="gym_options_fitness_classes" title="gym_options" value="Fitness Classes" class="">
<label for="gym_options_fitness_classes">Fitness Classes</label>
<input type="checkbox" name="gym_options[]" id="gym_options_spa" title="gym_options" value="Spa" class="">
<label for="gym_options_spa">On-site Spa</label>
<input type="checkbox" name="gym_options[]" id="gym_options_sauna" title="gym_options" value="Sauna" class="">
<label for="gym_options_sauna">Sauna/Steam Room</label>
<div class="clear"></div><div id="error-message-gym_options"></div></div><div class="ccms_form_element cfdiv_checkboxgroup label_over" id="personal_trainer_options_container_div"><label for="personaltrainer_options">Personal Trainer Options</label><input type="hidden" name="personaltrainer_options" value="" alt="ghost" />
<input type="checkbox" name="personaltrainer_options[]" id="personaltrainer_options_strength" title="" value="Strength" class="">
<label for="personaltrainer_options_strength">Strength/Body Building</label>
<input type="checkbox" name="personaltrainer_options[]" id="personaltrainer_options_cardio" title="" value="Cardio" class="">
<label for="personaltrainer_options_cardio">Cardio</label>
<input type="checkbox" name="personaltrainer_options[]" id="personaltrainer_options_flexibility" title="" value="Flexibility" class="">
<label for="personaltrainer_options_flexibility">Flexibility</label>
<div class="clear"></div><div id="error-message-personaltrainer_options"></div></div>

I know that I need to use javascript. I have tried to use the usableforms.js but being a total newbie to Javascript I know I am doing something wrong because I can't get it to work right. I was able to get a check box selection to "onChange" produce the checkbox group. But can't seem to wrap my brain around the selection box. I want to learn to do this effectively as it will be a core function in the entire form.

Any assistance or pointing me to the right direction will be much appreciated!

Thank You!