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

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.

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';

  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
    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
        else {
            //hide address-change grid container

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

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

1 Like