Change value of a checkbox by click in parent container

0
Hi,Is it possible in Mendix to switch the selection of a checkbox that is placed inside a container by clicking in that container.Default the user needs to click on the checkbox itself to change the value, it would be more user-friendly when he/she could just click inside the container where that checkbox is in.I guess that should be possible, maybe by some widget-setting of by some JS (but I have no idea how to in Mendix)Remark: We only use platform supported widgets (so no community supported widget as a possible solution because I may not use that)I also found that I can add a Microflow on the click-event of a container and change the value of the checkbox in that Microflow but i would like a more generic solution so I can just use that same script (or whatever that is possible, maybe with css but I guess this will not be possible with css) on multiple places without the need to change the underlying code (so click on container will search the child-checkbox (only 1) and will switch the value of that checkbox).Thanks
asked
4 answers
0

First, give your container a class, for example: toggle-container. This will mark the containers where clicking anywhere inside should toggle the checkbox.


Then create a JavaScript action (for example EnableToggleContainer) and add this code:


export function EnableToggleContainer() {

    document.addEventListener("click", function (e) {

        var container = e.target.closest(".toggle-container");
        if (!container) return;

        // If the user clicked directly on the checkbox, do nothing
        if (e.target.type === "checkbox") return;

        var checkbox = container.querySelector("input[type='checkbox']");

        if (checkbox && !checkbox.disabled) {
            checkbox.click();
        }
    });
}


Call this JavaScript action once when the page loads (for example in the page’s On load microflow). After that, any container with the class toggle-container will toggle its child checkbox when clicked.


If this resolves the issue, please close the topic.


answered
0

Hi Didier Dujardin


Not natively; a container click won’t toggle a child Checkbox out‑of‑the‑box. With only platform‑supported options, the clean pattern is: wrap the Checkbox in a Container and set the Container’s On click → Nanoflow that toggles the underlying Boolean (Change object: MyAttr = not($current/MyAttr); optionally commit/refresh). Make it generic/reusable by putting this in a Snippet/Building block that takes the context object; you reuse the same nanoflow everywhere without touching DOM. If you really want a true “click anywhere inside container to flip the checkbox” behavior, you can still stay platform‑supported by using a JavaScript action (called from the container’s On click nanoflow) that finds and toggles the first checkbox within the clicked container. just note DOM selectors can be brittle, so the Boolean‑toggle nanoflow approach is the Mendix‑best‑practice.

I hope this helps!!


answered
0

Hi,


Yes, this is possible in Mendix using only platform-supported functionality.

However, it cannot be done purely with CSS. It must be handled either through a microflow/nanoflow or through standard HTML label behavior.

Below are the correct approaches.

Use a Container Click Event + Nanoflow

Since you are allowed to use platform-supported widgets, the proper way is:

  1. Add an On Click → Nanoflow to the parent container.
  2. In the nanoflow:
    • Change the object.
    • Set the checkbox attribute to:

not $currentObject/YourBooleanAttribute
  1. Do not commit (unless required).
  2. Refresh in client.

This toggles the checkbox value cleanly and works everywhere.

This approach is:

  • Fully supported
  • Reusable
  • No custom JS required
  • No DOM manipulation
  • Upgrade safe

Even Better UX Solution No Microflow Required

If the checkbox is bound to a Boolean attribute and is inside the same data view:

Wrap the checkbox inside a Label widget.

HTML behavior automatically toggles a checkbox when its associated label is clicked.

Steps:

  1. Place Checkbox inside a Layout Grid or Container.
  2. Add a Label element and link it to the checkbox.
  3. Clicking anywhere on the label toggles the checkbox.

This is native HTML behavior and fully supported.

However, this works best when layout allows proper label association.

What Will NOT Work

  • Pure CSS (CSS cannot change data state).
  • Searching DOM for checkbox and toggling via JS (not recommended, not upgrade safe).
  • Trying to auto-bind container click without logic.


If you need this pattern in many places:

Create a small reusable building block:

Container

  • On Click → Nanoflow
  • Toggle Boolean

This keeps behavior consistent and maintainable.


Yes, it is possible.

The correct and supported solution is to toggle the Boolean attribute using a container click event and a nanoflow.

CSS alone cannot change the checkbox value.

JavaScript DOM manipulation is not recommended.

Using a container click nanoflow is the cleanest Mendix-native solution.




answered
0

Hi Ahmet,

I've got it working ;-)
Thanks

Still a question:

If I would use this in multiple pages do I need to call this JS in every page where I want to use this or can I call this once in the session (lets say at login or so) and use it on different pages.

I'm also still wondering if I can make it work with a Building Block because that would make it still easier but no idea if that can work ... will try that latter

answered