Forum | Appery.io

How do I save the values and labels of the checked items in a group of checkboxes to local storage and then recreate the list of checked items on another page?

Hi Shaun.

Answer very depends on your situation.

But in common use (when list builds on list service) you have following solution:

1 Open first page. And add checkboxgroup component on the page

 1.1 Map this component with "list" datasource. 

 1.2 Make sure you have mapped "value" with "_id" item data. [url=http://prntscr.com/3jaliu/direct]http://prntscr.com/3jaliu/direct[/url] 

2 Use following code to get checkBoxes values, and store it in LSV:

precode

//Where "mobilecheckboxgroup_23" your checkboxesgroup name. You should replace it with yours.
var checkBoxes = Apperyio("mobilecheckboxgroup_23").find('input[type="checkbox"]');
var checkBoxesState = {};

for(var i = 0; i < checkBoxes&#46;length; i++){
var checkBox = jQuery(checkBoxes);

 checkBoxesState[checkBox.val()] = checkBox.prop("checked"); 

};

&#47;&#47;Store checkboxes state to the lsv&#46;
localStorage&#46;setItem("checkBoxesState", JSON&#46;stringify(checkBoxesState) );

/code/pre

3 Open second page and do the same as on 1st step.

4 To restore checkboxes(after checkboxList inited) you can use following code:

precode

&#47;&#47;Restore checkboxes state from the lsv&#46;
var checkBoxesState = localStorage&#46;getItem("checkBoxesState");
checkBoxesState = JSON&#46;parse(checkBoxesState);

&#47;&#47;Where "mobilecheckboxgroup_23" your checkboxesgroup name&#46; You should replace it with yours&#46;
var checkBoxes = Apperyio("mobilecheckboxgroup_23")&#46;find('input[type="checkbox"]');

for(var i = 0; i < checkBoxes&#46;length; i++){
var checkBox = jQuery(checkBoxes);

 checkBox.prop("checked", checkBoxesState[checkBox.val()]).checkboxradio('refresh'); 

};

/code/pre

That's all.

Note: "value" attribute of each checkbox from first page should equal to this value on the second page.

Regards.

Thank you Yurii. Can you please explain the reason for step 1.2 -- mapping the _id item data?

Also, how do I preserve the labels in addition to the values?

Hi Shaun.

Ok. The reason of 1.2 step is just to garantee equal values in the checkbox items.

To implement store and restore processing you should have equal items in the first and second page.

So conformity of these items we can implement only if value in these checkboxes would be the same.

Also you could implement your items conformity with your way but i've just suggest you a easy way to do it.

Sorry but your question about labels is not fully clear.

But if you just want to save label with checked property in one object you can use this modified code:

precode

&#47;&#47;Where "mobilecheckboxgroup_23" your checkboxesgroup name&#46; You should replace it with yours&#46;
var checkBoxes = Apperyio("mobilecheckboxgroup_23")&#46;find('input[type="checkbox"]');
var checkBoxesState = {};

for(var i = 0; i < checkBoxes&#46;length; i++){
var checkBox = jQuery(checkBoxes);

 checkBoxesState[checkBox.val()] = {checked: checkBox.prop("checked"), view: checkBox.closest(".ui-checkbox").find("label").text()}; 

};

&#47;&#47;Store checkboxes state to the lsv&#46;
localStorage&#46;setItem("checkBoxesState", JSON&#46;stringify(checkBoxesState) );

/code/pre

And some modificating for restore code(just to restore checked property):

precode

&#47;&#47;Restore checkboxes state from the lsv&#46;
var checkBoxesState = localStorage&#46;getItem("checkBoxesState");
checkBoxesState = JSON&#46;parse(checkBoxesState);

&#47;&#47;Where "mobilecheckboxgroup_23" your checkboxesgroup name&#46; You should replace it with yours&#46;
var checkBoxes = Apperyio("mobilecheckboxgroup_23")&#46;find('input[type="checkbox"]');

for(var i = 0; i < checkBoxes&#46;length; i++){
var checkBox = jQuery(checkBoxes);

 checkBox.prop("checked", checkBoxesState[checkBox.val()].checked).checkboxradio('refresh'); 

};

/code/pre

Regards.