(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

Answer 1

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.

Answer 2

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

Answer 3

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/

Answer 4

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 });
                        }
                    );
                }
            );
        }