Toggle visibility of checkbox based on status of radio

[guido_1]

Hi,

I have a form where a customer choose from "option radio" a pizza : mini - medium - maxi.
I have topping with checkbox: toppingmini for pizza mini, toppingmedium for pizza medium and toppingmaxi for pizza maxi.
A customer when click on radio "pizza medium" display only toppingmedium..... It's all right now.
But, if the customer choose pizza maxi, is not wonderful see the form with big space height:

pizza mini
pizza medium
pizza maxi

toppingmaxi:
ham
salami
olives

How can I display toppingmaxi near(top) the "radio" pizza size?

div id="option-229" class="option">
<span class="required">*</span>
<b>pizzasize:</b><br />
<input type="radio" name="option[229]" value="25" id="option-value-25" />
<label for="option-value-25">mini (+$67.00)
</label>
<br />
<input type="radio" name="option[229]" value="24" id="option-value-24" />
<label for="option-value-24">medium (+$55.00)
</label>
<br />
<input type="radio" name="option[229]" value="26" id="option-value-26" />
<label for="option-value-26">maxi (+$44.00)
</label>
<br />
</div>
<br />
<div id="option-230" class="option">
<b>toppingmini:</b><br />
<input type="checkbox" name="option[230][]" value="21" id="option-value-21" />
<label for="option-value-21">ham (+$7.00)
</label>
<br />
<input type="checkbox" name="option[230][]" value="22" id="option-value-22" />
<label for="option-value-22">olives (+$12.00)
</label>
<br />
<input type="checkbox" name="option[230][]" value="23" id="option-value-23" />
<label for="option-value-23">salami (+$16.00)
</label>
<br />
</div>
<br />
<div id="option-231" class="option">
<b>toppingmaxi:</b><br />
<input type="checkbox" name="option[231][]" value="27" id="option-value-27" />
<label for="option-value-27">ham 200 (+$66.00)
</label>
<br />
<input type="checkbox" name="option[231][]" value="28" id="option-value-28" />
<label for="option-value-28">salami 200 (+$88.00)
</label>
<br />
</div>
<br />
<div id="option-232" class="option">
<b>toppinmedium:</b><br />
<input type="checkbox" name="option[232][]" value="29" id="option-value-29" />
<label for="option-value-29">ham 100gr (+$38.00)
</label>
<br />
<input type="checkbox" name="option[232][]" value="31" id="option-value-31" />
<label for="option-value-31">salami 100gr (+$49.00)
</label>
<br />
<input type="checkbox" name="option[232][]" value="30" id="option-value-30" />
<label for="option-value-30">olives 100gr (+$93.00)
</label>
<br />
</div>
<br />
</div> 



<script type="text/javascript"><!--



    $(document).ready(function() {


    $('[name*="option[229]"]').click(function() {
        $('#option-230').css('visibility', $('#option-value-25').attr('checked') ? 'visible':'hidden');
        });
    $('[name*="option[229]"]').click(function() {
        $('#option-232').css('visibility', $('#option-value-24').attr('checked') ? 'visible':'hidden');
        });
    $('[name*="option[229]"]').click(function() {
        $('#option-231').css('visibility', $('#option-value-26').attr('checked') ? 'visible':'hidden');
    });


    });



//--></script> 

This is basic logic.

In your jquery you need to set a few if statements, such that if radio button is set then show checkbox.

Will post up an example on jsfiddle if needed but this is pretty simple stuff.

<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2






<input type="radio" name="selectType" value="byName" class="radioName" />






$(document).ready(function () {
   $('.radioName').click(function () {
      $('.name').show();
      $('.title').hide();
   });

   //same logic for titles..
});

[guido_1]

ok, thank you. It's working.

If I'd like to hide all checkboxes at the beginning and show them when I click radio only.
How can I make it?

I think you can initially set the visibility to be hidden in the css.

Or on document ready, loop through all the checkboxes and set the it to .hide()

[guido_1]

thanks all right now.

This script is correct for a form, but if I need it for multiple products, how can I make it dynamic?
I like set this script in OC.

I have set in OC but it is not works.

<script type="text/javascript">

    //set up the onclick event according to radio button ID.
     $('#option-value-'+'<?php echo $option_value['product_option_value_id']; ?>').bind('click', function() {

//get current option_value_id

           var value = '<?php echo $option_value['product_option_value_id'];?>';

//set up a conditional to show/hide other elements on the page

            if(value == 25){



    $("#option-230").show();
    $("#option-231").hide();
    $("#option-232").hide();

}else if(value == 24){

    $("#option-230").hide();
    $("#option-231").show();
    $("#option-232").hide();

 }else {

    $("#option-230").hide();
    $("#option-231").hide();
    $("#option-232").show();

 }


});


      </script>

[guido_1]

I have a problem with my first form.

Now :
1) I when click radio type display checkbox based
2) click on checkbox
3) change radio type
4) my form save first checkbox

I want that :
I when change radio type uncheck all checkboxes

How can I make it, please?

http://stackoverflow.com/questions/5229023/jquery-check-uncheck-all-checkboxes-with-a-button