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 
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.
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)"
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!
If a checkbox group or a radio group stores the values as an array, then could I use the array tools such as .remove
on a checkbox group.
dmx-on:click="company_size.remove('value3')"
if so does anyone have the correct syntax, as i have tried quite a few and it’s not working.
Will this help?
<div class="input-group col-sm-6" id="stat_osf" is="dmx-radio-group" dmx-show="sc_ad_job_q.data.sa_q_job_q.job_type == 1">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-tire fa-fw fa-lg"></i>O/S/F</div>
</div>
<div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 32, '==')"
dmx-on:updated="stat_osf.setValue(sc_ad_job_q.data.sa_q_job_q.stat_osf)">
<label class="btn btn-sm btn-clear" dmx-bind:for="input_{{menu_id}}_0_osf" dmx-bind:id="stat_osf_label_{{menu_id}}_0" dmx-show="$index == 0">
<input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_0_osf" dmx-bind:value="" name="stat_osf" value="0"><i class="fa-ban fas"></i></label>
<label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}_osf" dmx-class:active="menu_list_id == sc_ad_job_q.data.sa_q_job_q.stat_osf">
<input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}_osf" dmx-bind:value="menu_list_id" name="stat_osf"
dmx-bind:checked="menu_list_id == sc_ad_job_q.data.sa_q_job_q.stat_osf">{{list_label}}</label>
</div>
</div>
Hmm, maybe with some modification, it might give some further idea. Thank you.
If I could remove i single entry from a checkbox group value array it would be the simplest way, which is why I tried that first, but I may need to take a longer procedure to achieve it. Although I am indeed still trying to see if the remove may work.
So looks like there is no way I could find to remove a single item from a checkbox groups value, instead I had to
Add the checkbox group values into an empty array
<dmx-array id="arrWhere" dmx-bind:items="checkboxGroup.value"></dmx-array>
Them remove from the array itself. But it did work with minimal hassle, however i just imagined i could manually remove an item directly from the checkbox group array itself.
Hi Patrick (or anyone else in the mood to chime in),
I can’t seem to dynamically uncheck the checkboxes (for instance on reload of sc or click on button) that are in my table. What am I missing here?
I have this check all checkbox:
<input class="form-check-input" type="checkbox" value="" id="allcheck" name="allcheck">
And I have a checkbox in my table:
<td><div is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input class="custom-control-input" type="checkbox"
dmx-bind:id="'incomingorders'+$index" dmx-bind:value="id"
dmx-bind:checked="allcheck.checked"
dmx-on:updated="checked ? arr_orders.addUniq(id) : arr_orders.remove(id)"></div></td>
Now on clicking this button the check all does uncheck, but the checkbox in the table does not uncheck (I have tried multiple mentioned sollutions here):
<button id="btn2" class="btn" dmx-on:click="allcheck.select(false);group1.setValue([])" onclick="$('[name=group1]').prop('checked', false)">uncheck</button>
It would be great if anyone could point me in the right direction here.
bg Jelle
Bump… Anyone have any idea on how to uncheck boxes from within a table on server connect reload?