(jQuery) Save checkbox state on click in cookie

Question

There are a lot of topics regarding this function, nonetheless I can't seem to get it working. I've googled on this specific case and a bunch of links let me here, but strangly enough I can't seem to get them to work. The only thing I did get working was the following: http://dl.dropbox.com/u/2238080/a/!old/z.htm but as you can see, it doesn't store the state of the box is unchecked.

Regards, Ruben

That Dropbox link gives a 404. Something like a JSFiddle would have been helpful for those coming along later. — Ojen, Jan 05 '17 at 22:42

Mark Schultheiss · Accepted Answer · 2012-12-18T17:10:13.973

You can change ALL your code to just: EDITED to remove part unneeded.

$(document).ready( function(){
   // read the current/previous setting
    $("input.box[type=checkbox]").each(function() {
        var name = $(this).attr('name');
        if ($.cookie(name) && $.cookie(name) == "true") {
            $(this).prop('checked', $.cookie(name));
        }
    });
   // event management
    $("input.box[type=checkbox]").change(function() {
        var name = $(this).attr("name");
        $.cookie(name, $(this).prop('checked'), {
            path: '/',
            expires: 365
        });
    });
});

including getting rid of all these:

$(document).ready( function(){
    remember("[name=1]");
});
...

EDIT: less verbose version:

$("input.box").each(function() {
    var mycookie = $.cookie($(this).attr('name'));
    if (mycookie && mycookie == "true") {
        $(this).prop('checked', mycookie);
    }
});
$("input.box").change(function() {
    $.cookie($(this).attr("name"), $(this).prop('checked'), {
        path: '/',
        expires: 365
    });
});

working example: http://jsfiddle.net/R73vy/

I feel like it's worth mentioning for people who stumble upon this looking for an answer, like I was, as it took me a bit of researching to realize this (and that may just be my own stupidity, for which I apologize), but you'll need the jquery.cookie plugin for this to function. I found it at this address: https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js — Skryn, Aug 13 '13 at 15:25
@Skryn Fair point, it's in the fiddle as an external resource but not specifically called out - and the link in the question is now invalid it seems. — Mark Schultheiss, Aug 13 '13 at 15:28

score 2 · Answer 2 · answered Nov 05 '13 at 23:47

If you don't strictly need to use cookies, using the newer HTML5 Web Storage (specifically the sessionStorage object in this case) is a lot easier and better than storing in a cookie:

http://www.w3schools.com/html/html5_webstorage.asp

Browser support is pretty full:

http://caniuse.com/#search=sessionstorage

score 2 · Answer 3 · answered Mar 25 '15 at 00:58

If you're just interested in one checkbox AND/OR you don't want to include the jQuery cookie plugin for this, here's two lines of code:

//on page load set the checkbox to stored value or default to true
$('#turbo').prop('checked' , ( typeof sessionStorage.turbo !== 'undefined' ) ? (sessionStorage.turbo=='true') : true ); 
//when checkbox is updated, update stored value
$('#turbo').change( function() { sessionStorage.turbo = $(this).prop('checked');  });

This also doesn't use cookies so saves a couple bytes of bandwidth. Change to localStorage to extend lifetime of saved selection.

devnull69 · Answer 4 · 2012-12-18T16:16:27.460

It should work with jQuery < 1.6 but starting with 1.6 you should change every appearance of .attr("checked") to .prop("checked")

EDIT: Changed the if condition for checking the cookie

        function remember( selector ){
            $(selector).each(
                function(){
                    var name = $(this).attr('name');
                    if( $.cookie( name ) && $.cookie(name)=="true" ){
                        $(this).prop('checked', true);
                    } else {
                      $(this).prop('checked', false)
                    }
                    $(this).change(
                        function(){
                            $.cookie(name, $(this).prop('checked'), { path: '/', expires: 365 });
                        }
                    );
                }
            );
        }

(jQuery) Save checkbox state on click in cookie

4 Answers4

Linked