Programmatically toggling checkboxes in the control panel.

[geertjanknapen1]

I have a fieldset with a Checkboxes fieldtype. It contains a bunch of countries.
I created custom JS which I've added to the control panel as per the documentation (using webpack) > https://statamic.dev/extending/control-panel#using-webpack

I have a button, what I want it to do is select all EU countries within the Checkboxes fieldtype.

I can utilize something like .prop('checked', true) but this only visually checks the checkboxes, upon saving the data is no longer present in the entry.

---

After some research I stumbled across hooks. They kind of do what I want. But there is a problem / I don't know how to correctly do this.

When the button is clicked there is a piece of code that hooks into the event.saving event. This adds the values of the correct countries and after saving this data is retained. But due to the hook firing upon click of the 'Check EU countries' button, the data is not retained after saving.

It only works if the hook is the last thing firing, but since that is controlled by the user, I can't know that, therefore the data will never be accurate.

What I have (that works):

• Entry is being edited.
• User select (non EU) countries.
• User clicks 'Check EU countries' button
• User saves
• Entry is saved with users non-EU countries + EU countries.

What I want (but don't know how to properly do)

• Entry is being edited.
• User selects (non-EU) countries
• User clicks 'Check EU countries' button
• User unchecks some EU countries.
• User saves
• Entry is saved with users non-EU countries + EU countries (except the one the user unchecked).

Any pointers would be very helpful.

It looks like this;

[geertjanknapen1]

I managed to fix this by myself.

I ended up tracking all changes for checkboxes within the countries Checkboxes fieldtype.
Then upon saving of the entry, using the entry.saving hook, I overwrite the countries key in the payload in order to have al the checked checkboxes present.

This also means that upon saving, all the correct values will be checked even if the EU button is clicked at the start and not right before saving.