Checked the checkbox if localStorage returns value true

Question

I am trying to save multiple select values in local storage and the data is setting and getting successfully in and from local storage but the box is not checked by the jquery.

Here is the fiddle of my code and below is the jquery code I am using :

$('.cmn').on('click', function() {
            var fav, favs = [];
            $('.cmn').each(function() { // run through each of the checkboxes
            fav = {class: $(this).attr('class'), value: $(this).prop('checked')};
                //console.debug(fav);
                favs.push(fav);
            });
            localStorage.setItem("payment", JSON.stringify(favs));
        });

        $(document).ready(function() {
            var payment = JSON.parse(localStorage.getItem('payment'));

            if (!payment.length) {return};
            //console.debug(payment);

            for (var i=0; i<payment.length; i++) {
                console.debug(payment[i]);
                //alert("."+payment[i].class);
                $("."+payment[i].class).prop('checked', payment[i].value);
            }
        });

"but it is not working fine". What does that mean? Please explain the problem. — Carcigenicate, Oct 28 '16 at 11:21
yes the result is fine as you can see in the console but it is not checking the box — jayant rawat, Oct 28 '16 at 11:23
BTW, most people won't click links in questions. It's up to you as the question asker to clearly say what your issue is. And have you tried debugging this? — Carcigenicate, Oct 28 '16 at 11:24
Please post the "*[mcve]*" code in your question, not in an external resource. — David Thomas, Oct 28 '16 at 11:24
Actually i have no idea how to tell that thing all i want is to check the box which have true values after getting local data but it is not working fine — jayant rawat, Oct 28 '16 at 11:27
Looks like payment[i].class is always cmn, yo do dot differentiate the input textboxes by an id for example, they all have same class. — Andrei Filimon, Oct 28 '16 at 11:27
what `JSON.parse(localStorage.getItem('payment'));` is return — Syed Arif Iqbal, Oct 28 '16 at 11:29
You can do it with class but you must declare cmn_1, cmn_2 etc different classes for each input. — Andrei Filimon, Oct 28 '16 at 11:31
`[Object { class="cmn", value=false}, Object { class="cmn", value=true}, Object { class="cmn", value=true}, Object { class="cmn", value=true}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}, Object { class="cmn", value=false}]` this is what it returns — jayant rawat, Oct 28 '16 at 11:31

score 3 · Accepted Answer · answered Oct 28 '16 at 11:30

3

Working fiddle.

You should add the index i in :eq() to specify the index of the element since all the elements have the same class cmn :

$("."+payment[i].class+':eq('+i+')').prop('checked', payment[i].value);

Hope this helps.

answered Oct 28 '16 at 11:30

Zakaria Acharki

66,747
15
75
101

1

Thanks a lot for your answer. I never heard about `:eq` so i didn't use it – jayant rawat Oct 28 '16 at 11:33
Yes really. Also want to know one thing can i store image and div value too in localStorage or not? – jayant rawat Oct 28 '16 at 11:36
Check this fiddle store the image then get it using the `outerHTML` attribute : http://jsfiddle.net/z_acharki/VPC86/241/ – Zakaria Acharki Oct 28 '16 at 11:52

Syed Arif Iqbal · Answer 2 · 2016-10-28T12:00:42.723

2

add counter variable in order to track which checkbox you are targeting

$('.cmn').on('click', function() {
            var fav, favs = [], i=0;
            $('.cmn').each(function() { // run through each of the checkboxes
            fav = {class: $(this).attr('class'), value: $(this).prop('checked'), index: (i++)};
                //console.debug(fav);
                favs.push(fav);
            });
            localStorage.setItem("payment", JSON.stringify(favs));
        });

        $(document).ready(function() {
            var payment = JSON.parse(localStorage.getItem('payment'));

            if (!payment.length) {return};
            //console.debug(payment);

            for (var i=0; i<payment.length; i++) {
                //console.debug(payment[i]);
                //alert("."+payment[i].class);
                $(".cmn:eq("+payment[i].index+")").prop('checked', payment[i].value);
            }
        });

http://jsfiddle.net/VPC86/239/

edited Oct 28 '16 at 12:00

answered Oct 28 '16 at 11:38

Syed Arif Iqbal

1,830
12
16

Thanks for your answer it is also working fine but you are little bit late to answer but thanks for your answer i will remember this too. Thanks a lot :) – jayant rawat Oct 28 '16 at 11:39
Also want to know one thing can i store image and div value too in localStorage or not? – jayant rawat Oct 28 '16 at 11:41
can you please tell me how can i remove all data of checkbox in localstorage – jayant rawat Oct 28 '16 at 11:50
`window.localStorage.clear();` this is clear all information or by using this `window.localStorage.remove('payment');` – Syed Arif Iqbal Oct 28 '16 at 11:52
this link helps you to store image in localStorage http://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page – Syed Arif Iqbal Oct 28 '16 at 12:01

Checked the checkbox if localStorage returns value true

2 Answers2