Show / Hide Multiple check box options to display all selected options

Forms Public Forms
1

I am creating a Plumsail Public form and have several check box options for the user to select. See image attach of what I have created so far. I envision multiple check boxes can be selected and then display the related grid of information. Is there an example that shows me the most efficient way to produce this function? I am a Javascript novice and appreciate any feedback if I am working towards the wrong solution.

Multi-Show-Hide
Multi-Show-Hide.JPG1447×521 65 KB

1 Like
2

Hello @gwmyers,

To hide/show grid containers depending on the selected values in the Checkboxes field, you need:

  1. add a CSS class to the grid containers, e.g. 'address-change', 'close-account';
    image

  2. Use the below code to check which value is selected, and show/hide grid containers. Replace CheckBox0 with the internal name of the field in the form.

fd.rendered(function() {

    //hide grid containers on form load
    $('.address-change').hide();
    $('.close-account').hide();
    
    var checkbox = fd.field('Checkboxes1');
    
    //show or hide grid containers when selecting values
    checkbox.$on('change', function(value) {
        
        if(checkbox.value.includes('Address Change') == true) {
            //show address-change grid container
            $('.address-change').show();
        }
        else {
            //hide address-change grid container
            $('.address-change').hide()
        }

        if(checkbox.value.includes('Close Account') == true) {
            //show close-account grid container
            $('.close-account').show();
        }
        else {
            //hide close-account grid container
            $('.close-account').hide()
        }
    });
});
3

Thank you so much. This works exactly like I envisioned.

1 Like