Checkbox control other checkbox not working, possible bug preventing event

[Msj1542]

Im fairly confident this isnt a bug and just a missed step on my end, but if it is a missed step I can not figure out what it is.

I am trying to set up a scenario where when one checkbox is checked it checks one or many other checkboxes, and when one or many of those second checkboxes is checked it shows a hidden button.

A typical use case for this would be a table containing a checkbox on each row and a select all checkbox in the header, where when one or many of the row checkboxes is checked it shows a hidden button that is outside of the table (i.e. “delete selected,” or “approve selected,” etc), and when the header checkbox is checked it checks all of the row checkboxes, thus also showing the hidden button.

The problem I am encountering is when checking the header checkbox it does check the row checkboxes but the button is not shown, however, if the checkboxes in the rows are checked individually the button shows as expected. This is being done by changing the value of a variable through a dynamic event on checked, but when the checkbox is checked from the header checkbox it appears this event is not triggered because the variable doesn’t change, yet the checked state and the value still does. =/

I set up the scenario as a single stand-alone container for simplicity. Here is the code and some screenshots:

        <div class="d-flex justify-content-around flex-row">
        <div class="d-flex">
            <dmx-value id="var1" dmx-bind:value="0"></dmx-value>
            <p dmx-text="'Var Value:  '+var1.value">Enter your content here</p>
        </div>

        <div class="d-flex flex-column">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="input1" name="input1" dmx-bind:value="checked.toNumber()">
                <label class="form-check-label" for="input1">Default checkbox</label>
            </div>
            <p dmx-text="'Value:  '+input1.value+' // Checked State:  '+input1.checked">Enter your content here</p>
        </div>
        <div class="d-flex flex-column">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="input2" name="input2" dmx-on:checked="var1.setValue((var1.value + 1))" dmx-on:unchecked="var1.setValue((var1.value - 1))" dmx-bind:checked="input1.checked" dmx-bind:value="checked.toNumber()">
                <label class="form-check-label" for="input2">Default checkbox</label>
            </div>
            <p dmx-text="'Value:  '+input2.value+'  // Checked State:  '+input2.checked">Enter your content here</p>
        </div>
        <div class="d-flex flex-column"><button id="btn4" class="btn btn-primary" dmx-hide="(var1.value &lt; 1)">Button</button></div>

Nothing selected:

Input2 selected; everything as expected, with variable value updated:

Page refreshed, input1 selected; input2 as expected, with value change and correct state, but variable value unchanged, thus button still hidden:

I just don’t understand what else to try here, since the dynamic event is on checked it should update the variable value, and the checked state is correct so I have no idea why the dynamic event for checked state is not running to update that variable value. =/

[ben]

I can only think that the on checked/unchecked events will be triggered after the chackbox has been physically checked, i.e. with a mouse on click event.

With that in mind, the easiest way is to add the checked/unchecked events to the master checkbox as well.

<dmx-value id="var1" dmx-bind:value="0"></dmx-value>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="d-flex justify-content-around flex-row">
                <div class="d-flex">
                    <p dmx-text="'Var Value:  '+var1.value">Enter your content here</p>
                </div>

                <div class="d-flex flex-column">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="input1" name="input1" dmx-bind:value="checked.toNumber()" dmx-on:checked="var1.setValue((var1.value + 1))" dmx-on:unchecked="var1.setValue((var1.value - 1))">
                        <label class="form-check-label" for="input1">Default checkbox</label>
                    </div>
                    <p dmx-text="'Value:  '+input1.value+' // Checked State:  '+input1.checked">Enter your content here</p>
                </div>
                <div class="d-flex flex-column">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="input2" name="input2" dmx-on:checked="var1.setValue((var1.value + 1))" dmx-on:unchecked="var1.setValue((var1.value - 1))" dmx-bind:checked="input1.checked" dmx-bind:value="checked.toNumber()">
                        <label class="form-check-label" for="input2">Default checkbox</label>
                    </div>
                    <p dmx-text="'Value:  '+input2.value+'  // Checked State:  '+input2.checked">Enter your content here</p>
                </div>
                <div class="d-flex flex-column"><button id="btn4" class="btn btn-primary" dmx-hide="(var1.value &lt; 1)">Button</button></div>
            </div>
        </div>
    </div>
</div>

[Msj1542]

So, I tried that already thinking that would be an easy workaround. However, once applied I found out that it throws off the variable value being synced correctly with the checkboxes that are checked/unchecked.

I.e. there are 5 slave/child checkboxes and 1 master, but with the 5 not sending a value update to the variable upon checking the master, the master is the only one that does. So now you have 1 + 5 boxes checked, but the variable value is only 1, meaning by unchecking only 1 of the 5 boxes the value is now 0, and thus the button rehides prematurely with boxes still checked.

Do you know if there is a way to put maybe a 1ms delay, or something, before the on-click event fires, so that maybe it catches the checked state correctly? If not, do you have a good workaround for the problem I mentioned about adding the add variable event to the master as well? I’m kind of stumped here…

[Msj1542]

I think I figured it out. Converted to flow and used an update event with IF Else condition for checked and unchecked. So far I haven’t found any unexpected results.