Creating Dynamic Radio Options Based on Checkboxes Selections Using Javascript

I didn't find the PHP solutions sufficient for my needs. I crafted an example of how to go about creating dynamic radio button options using javascript by binding to the gform_page_loaded hook and gathering the values of checkboxes from a previous step.

There is something to note about this hook, I'm not sure if it's considered a bug or not. The hook will still fire if you click "next" or "previous" even if validation fails and keeps you on that page. In my case, where I'm using javascript to hide radio buttons, this doesn't really matter but I thought the gforms devs might want to know, if they weren't aware.

For this example, I'm using a form with the id of 6. I'm using checkboxes on page 1 (input_6_2) to reformat a multiple choice list on page 2 by hiding all the radio buttons, then showing only specific ones based on the values of the checkboxes.

<script type="text/javascript">
jQuery(document).bind("gform_page_loaded", function(event, formId, currentPageNumber) {
    var ainputs=[];
    jQuery("#input_6_2 li input:checkbox").each(function() { ainputs.push(jQuery(this).is(":checked")) });
    if (currentPageNumber==2) {
        //alert('New page loaded. Page: ' + currentPageNumber + ', Form: ' + formId + ', inputs: ' + ainputs.join('", "'));
        jQuery("#input_6_8 li").hide();
        if (ainputs[0]==true) {
                jQuery(".gchoice_8_0").show();
        }
        if (ainputs[1]==true) {
                jQuery(".gchoice_8_1").show();
                jQuery(".gchoice_8_2").show();
        }
        if (ainputs[2]==true) {
                jQuery(".gchoice_8_3").show();
                jQuery(".gchoice_8_4").show();
        }
        if (ainputs[3]==true) {
                jQuery(".gchoice_8_2").show();
                jQuery(".gchoice_8_4").show();
                jQuery(".gchoice_8_5").show();
        }
    }
});
</script>

This is just a bare proof of concept, you'll want to do some additional checks to ensure your users aren't passing impossible values (values from now hidden multiple choice selections). I found this solution to be more flexible than the PHP "solution" for a project I'm currently working on.

I hope these notes help others looking to implement something similar. Maybe the devs have a few comments about it.

P.S. I noticed some inconsistency in the identification and classification of inputs (using classes instead of ids in some cases) and I'm unsure as to why you guys don't use arrays for checkboxes and radio buttons. I was able to work around this but it wasn't without a little critical thinking.

Hi m4change, code looks like what I might be after.

I am trying to populate once set of radio buttons based on another set of radio buttons. The radio buttons are in exact same form.

So let’s say I have 1 set which is

Radio Buttons 1
* Red
* Green
* Blue

Radio Buttons 2
* 1
* 2
* 3

So I would like to do a direct mapping. If a user chooses “red” then “1″ is dynamically chosen in the radio button 2 set and so on.

Would your code work for this?

Thanks