Dynamic checkboxgroups depending by radio button

Hi to all,
we have a form with 3 radio buttons that control 3 different checkboxgroups.

This is the form:
http://www.vascotto.it/index.php?option=com_chronoforms&chronoform=prova_varianti_tuffo

This is the HTML:

<div class="ccms_form_element cfdiv_radio" id="tuffo_tipo_container_div">
<label for="tuffo_tipo">TUFFO</label>
<input type="hidden" name="tuffo_tipo" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="radio" name="tuffo_tipo" id="tuffo_tipo_0" title="" value="BOMBA" class="validate['required']" />
<label for="tuffo_tipo_0">Bomba</label>
<input type="radio" name="tuffo_tipo" id="tuffo_tipo_1" title="" value="CLANFA" class="validate['required']" />
<label for="tuffo_tipo_1">Clanfa</label>
<input type="radio" name="tuffo_tipo" id="tuffo_tipo_2" title="" value="KAMIKAZE" class="validate['required']" />
<label for="tuffo_tipo_2">Kamikaze</label>
</div>
<div class="clear"></div>
<div id="error-message-tuffo_tipo"></div>
</div>

<div class="ccms_form_element cfdiv_checkboxgroup" id="varianti_bomba_container_div">
<label for="varianti_bomba">varianti bomba</label>
<input type="hidden" name="varianti_bomba[]" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="checkbox" name="varianti_bomba[]" id="varianti_bomba_0" title="" value="americana" class="validate['group[1]']" />
<label for="varianti_bomba_0">americana</label>
<input type="checkbox" name="varianti_bomba[]" id="varianti_bomba_1" title="" value="italiana" class="validate['group[1]']" />
<label for="varianti_bomba_1">italiana</label>
</div>
<div class="clear"></div>
<div id="error-message-varianti_bomba"></div>
</div>

<div class="ccms_form_element cfdiv_checkboxgroup" id="varianti_clanfa_container_div">
<label for="varianti_clanfa">varianti clanfa</label>
<input type="hidden" name="varianti_clanfa[]" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="checkbox" name="varianti_clanfa[]" id="varianti_clanfa_0" title="" value="taconeti" class="validate['group[2]']" />
<label for="varianti_clanfa_0">taconeti</label>
<input type="checkbox" name="varianti_clanfa[]" id="varianti_clanfa_1" title="" value="caminada" class="validate['group[2]']" />
<label for="varianti_clanfa_1">caminada</label>
</div>
<div class="clear"></div>
<div id="error-message-varianti_clanfa"></div>
</div>

<div class="ccms_form_element cfdiv_checkboxgroup" id="varianti_kamikaze_container_div">
<label for="varianti_kamikaze">varianti kamikaze</label>
<input type="hidden" name="varianti_kamikaze[]" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="checkbox" name="varianti_kamikaze[]" id="varianti_kamikaze_0" title="" value="granzoporo" class="validate['group[3]']" />
<label for="varianti_kamikaze_0">granzoporo</label>
<input type="checkbox" name="varianti_kamikaze[]" id="varianti_kamikaze_1" title="" value="kaprikami" class="validate['group[3]']" />
<label for="varianti_kamikaze_1">kaprikami</label>
</div>
<div class="clear"></div>
<div id="error-message-varianti_kamikaze"></div>
</div>

<div class="ccms_form_element cfdiv_submit" id="input_submit_21_container_div" style="text-align:left">
<input name="input_submit_2" class="" value="Submit" type="submit" />
 
<input type='button' name='back' value='Back' class='' onclick='history.back()' />
<div class="clear"></div>
<div id="error-message-input_submit_2"></div>
</div>

This is the JS:

window.addEvent('domready', function() {
    var tuffo_tipo, varianti_bomba_div, varianti_clanfa_div, varianti_kamikaze_div;

    tuffo_tipo = $$('#tuffo_tipo_container_div input');

    // Nasconde i Checkboxes delle Varianti Tuffo
    varianti_bomba_div = $('varianti_bomba_container_div');
    varianti_bomba_div.setStyle('display', 'none');
    varianti_clanfa_div = $('varianti_clanfa_container_div');
    varianti_clanfa_div.setStyle('display', 'none');
    varianti_kamikaze_div = $('varianti_kamikaze_container_div');
    varianti_kamikaze_div.setStyle('display', 'none');	

    tuffo_tipo.each(function(item) {
     item.addEvent('click', function(){
      if ( this.value == 'BOMBA') {
       varianti_bomba_div.setStyle('display', 'block');
       varianti_clanfa_div.setStyle('display', 'none');
       varianti_kamikaze_div.setStyle('display', 'none');
      };
      if ( this.value == 'CLANFA') {
       varianti_bomba_div.setStyle('display', 'none');
       varianti_clanfa_div.setStyle('display', 'block');
       varianti_kamikaze_div.setStyle('display', 'none');
      };
      if ( this.value == 'KAMIKAZE') {
       varianti_bomba_div.setStyle('display', 'none');
       varianti_clanfa_div.setStyle('display', 'none');
       varianti_kamikaze_div.setStyle('display', 'block');
      };
     });
    });
});

We have 2 problems:
1) The first problem is the validation. We need to validate at least a checkbox but only of those displayed. The form as it requires the validation of at least one checkbox for each group. How can we do?

2) The second problem is the validation tips. They appear in the correct position only if you choose the first radio. When you select the second or third radio does not appear in the video. How can we do?

NOTE: Do not panic! "Bomb" and "Suicide Bombers" are the names of types of dip. This form is for a crazy dive competition. :-)

Many thanks for any suggestions and / or solution.
Regards, Spiz

Hi assopiz,

You need to disable the hidden checkbox groups, this will 'switch off' the validation from them and should fix both problems. Please see this FAQ for an example.

Bob