(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
– Ojen, Commented Jan 5, 2017 at 22:42

Mark Schultheiss · Accepted Answer · 2012-12-18 17:10:13Z

18

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/

edited Dec 18, 2012 at 17:10

answered Dec 18, 2012 at 16:51

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Skryn Over a year ago

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: raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

Mark Schultheiss Over a year ago

@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.

Chris Halcrow · Accepted Answer · 2013-11-05 23:47:11Z

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

answered Nov 5, 2013 at 23:47

Chris Halcrow

32.5k19 gold badges202 silver badges235 bronze badges

Comments

JaseC · Accepted Answer · 2015-03-25 00:58:15Z

2

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.

answered Mar 25, 2015 at 0:58

JaseC

3,2272 gold badges24 silver badges23 bronze badges

Comments

devnull69 · Accepted Answer · 2012-12-18 16:16:27Z

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

Collectives™ on Stack Overflow

(jQuery) Save checkbox state on click in cookie

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related