How Can I Deselect a Checkbox on-click?

Wappler General How To
#1

I can set a checkbox to be selected elsewhere using the .select() function:

dmx-on:click="cbox.select();cbox.setValue()"

Is there a way to DE-SELECT a checkbox in a similar way?

I can’t see an option for it in the menu system…

check

#2

To check a checkbox:

dmx-on:click="checkbox.select(true)"

To uncheck a checkbox:

dmx-on:click="checkbox.select(false)"
1 Like
How Do I Dynamically Uncheck a Checkbox?
Uncheck checkbox inside a table externally
#3

Thanks @Teodor! :slight_smile:

#4

Will I always need the .setValue() too in order to create an event?

#5

Why would you use setvalue for a checkbox?
The value of the checkbox must be entered in the static value firld in the UI …

#6

In my example in the other post, the selection is handled by the label element. The advantage in using the label is that it is inherently associated with the form input thus eliminating the use of ARIA.

This article https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA makes mention of:
developers should prefer using the correct semantic HTML element over using ARIA , if such an element exists. For instance, native elements have built-in keyboard accessibility, roles and states. However, if you choose to use ARIA, you are responsible for mimicking (the equivalent) browser behavior in script.

Edit: there can be more thank one label element for a form input field.

#7

A checkbox being checked or not determines whether the value is sent or not with the form (not what the value is). Thus, changing the value isn’t required.

#8

FYI somehow, my checkboxes are deselected on-click (in another input field) after I’ve set up the Checkbox form as follows:
image