Store IDs of checked checkboxes into local storage

I’ve gone blank with this one but am sure it’s easy.

I have a dynamic table with one column containing a checkbox. I want to be able to tick any number of them but instead of passing them to a server action, I want to store the IDs in an array in local storage so I can then do other things with them.

I’ve put it all in a form but I’m not sure that’s necessary.

What’s the technique for doing this?

Perhaps this isn’t as easy as I hoped. Can anyone assist me at all?

Here’s a snippet from a test file I created a while ago, when the array component was introduced:

<input class="form-check-input" type="checkbox" value="" id="id_checkbox_cell" name="idlist[]" dmx-bind:checked="id_checkbox_all.checked" dmx-bind:value="stock_id" dmx-on:updated="id_checkbox_cell.checked == true ? arrayChecked.addUniq(stock_id) : arrayChecked.remove(stock_id)">

It’s within a repeat as you would expect. There may well be other/better ways of doing this.

I forgot to mention that I use a dynamic event on the Array (on updated) to update it with the list of IDs.

Well you can setup a localstorage manager and add a variable in it which will store the items.
Then with a checkbox group component, use the on:updated event and store its value there:

<div is="dmx-checkbox-group" id="group1" class="checkbox-group" dmx-on:updated="local1.set('items',value)">
    <div dmx-repeat:repeat1="">
        <label><input id="checkbox1" type="checkbox" dmx-bind:value="country_code"> {{country_name}}</label>

Thanks for the assistance. I already have a Bootstrap 4 table using the generator so the

is="dmx-repeat" dmx-generator="bs4table"

is already there.

I’ve added a column to the table and put the checkbox there:

<td class="text-center">
    <input class="form-check-input" type="checkbox" name="RegistrantID[]" dmx-bind:value="RecordID" dmx-bind:id="inp_registrant_id_{{$index}}" value="0">

Where should the dmx-on:updated go?

So you are not using the checkbox group component but separate checkboxes?

Yes, but happy to use the checkbox group component if that’s how I should do it. I think where I’m confused is the repeat part as the checkbox group component seems to need to have its own repeat.

Would you able to give me a steer on this?


Sorry to keep posting but I’m at a loss with this.

1 Like

How should I use a checkbox group component within a generated bootstrap table?

Quite a lot of activity here :slight_smile: One reply is just enough @sitestreet, we do our best to reply the questions here even during the weekends, when the office is closed.

If you are using checkboxes in a table and not with a checkbox group component then you can use the array component.

  1. On click store the selected items in the array component
  • Add new dynamic event to the checkbox, on changed and check if the item is already in the array, if it’s there remove it and if it’s not - add it: arr1.items.contains(value) ? arr1.remove(value) : arr1.addUniq(value)
  1. Use the dynamic events of the array component - on updated and and set its value to the local storage.

Thanks @Teodor. Sorry for all the posts, I have literally spent hours trying to get this sorted and kept seeing my post drop down the thread. Shall I remove them?

I’ll go through what you’ve suggested now but it’s looking very promising.

I appreciate all the time you spend in the forum and the speed you reply, even during the weekends. :+1:

Brilliant @Teodor. I’ve not used the Array Component before and that was the key. I’m sure to use it much more now I know about it.

I do, however, have one thing not quite right. It’s working perfectly except 80% of the time, the first checkbox I click doesn’t store the value. Further clicks work fine but the first one becomes out of sync - checked is NOT in the array, unchecked IS in the array but only that one checkbox. All the others work fine.

Any ideas why this might be?

Just tested this but it works fine here …

Hmm, it’s a strange one. I shall do some more testing. I’ve had the breakthrough I needed and am extremely grateful for that. I should be able to sort this issue.

Thanks again :slight_smile:

I’ve found the issue but am at a loss as to why!

I’ve changed this:


to this:


and it’s now working reliably.

This has been improved in Wappler 5.2.1. Now there are two new dynamic events for the checkboxes - checked and unchecked, so you can run different actions depending on the checkbox status.

1 Like

This topic was automatically closed after 45 hours. New replies are no longer allowed.