How to clear a single checkbox with button click?

Hey all,

I now need to clear a checkbox that exists in a form, not a repeat.

I have a ‘clear’ button which I’d like to clear all checks. I’ve tried to use a dynamic event that sets the value of the checkbox to 0 and even ‘’ - but I’m getting no luck.

Any ideas?

Hello @mgaussie
So you don’t want to reset the whole form, but just the checkboxes (all?) inside it?

Hi @Teodor :slight_smile:

I have one large form, and two use cases:

If a user clears the entire form, then i’d like to be able to clear all checkboxes within it.

If the user just wants to clear one section of the form, let’s call it ‘company_size’ that has 5 checkboxes within that form group, I have a button they can click to just clear the checkboxes for that form group of 5 checkboxes.

Can’t figure it out!

You can use javascript to check/uncheck checkboxes but this will not fire the change event of the checkbox, which is a problem in most cases - especially when a checkbox is used to filter data.

Maybe @patrick can suggest a good solution here, as we don’t have a “check” dynamic event for the checkbox controls.

1 Like

Ok, no problem. Not firing the event change would be ok for some of the form groups, but not all of them - so would ideally need an alternative solution or I’ll need to move away from check boxes for this, I guess if @patrick doesn’t have an suggestion.

Could you set the value of the checkbox to:

dmx.bind:value="'somevalue_'+checkbox.checked"

That way the value actually changes when the check event takes place leading to the on change event being fired. You would then just use:

chechbox.value.split('_')[0]

to retrieve the useful part of the value

or you could do

dmx.bind:value="checkbox.checked ? 'somevalue' : '' "

Do you use the checkbox-group? You can then use the setValue action of it to set the group. For checking/unchecking a single checkbox use the select action on the checkbox.

Uncheck checkbox group:

dmx-on:click="company_size.setValue([])"

Uncheck single checkbox:

dmx-on:click="checkbox1.select(false)"

Uncheck checkboxes with jQuery:

onclick="$('[name=company_size]').prop('checked', false)"
1 Like

I’m not using a checkbox-group - I found I couldn’t easily stack checkboxes in a column with the checkbox-group so opted to create individual checkbox inputs one on top of each other.

Hey @patrick - I ended up converting all checks to a group, and just customizing the code within them a bit - and then used this approach, it works great. Thanks!