Add a select\unselect all button for a multiple checkbox field


Hi -
Here’s a brief description of what I need to accomplish;

We have a multiplecheckbox field contact property for our enewsletter subscriptions.
I have been tasked to find a way to add a custom field to allow subscribe\unsuscribe all.
The form is being served from HubSpot using the embed code inside custom html module on template.
Everything is being done in Hubspot
Also, the values for that field need to be broken out into categories.

So what I did was hide the enewsletter_subscription checkboxes (using visibility attribute not display). I used the values of each input to generate new inputs (see picture). When the input that’s visible is clicked, the value is changed on the hidden one.

Works great when you click the inputs. The problem is with the subscribe\unsubscribe all button.
If you click it and subscribe all and submit the form - it works.
If you click it to unsubscribe all and submit the form - no change.
If you click to unsubscribe all and then change one of the inputs to selected - the property is updated showing just the one value.

Any ideas on why this may happening? Is this something that may be due to the way the React virtual-dom works? I don’t much about React just yet, so it’s definitely complete speculation on my part.

Also - is there another approach that I can take to achieve the same goal short of creating custom forms elsewhere and submitting via the forms api?

Edit: I am outputting the values of the checkboxes to the console prior to form submit and on form submit and they all have the correct values.

Thanks in advance