Question

I am able to set the cookie for check boxes using the jquery function below. I am using the map function for reading values into cookies and the cookie gets saved automatically.

But I am not able to read cookie and set checkbox value on page refresh. I need to set the checkboxes to checked/ unchecked based on cookie value. Thanks in advance.

HTML Code

<input type="checkbox"  id="Option1" name="Option1" />
<input type="checkbox"  id="Option2" name="Option2" />
<input type="checkbox"  id="Option3" name="Option3" />
<input type="checkbox"  id="Option4" name="Option4" />
<input type="checkbox"  id="Option5" name="Option5" />

Jquery part

var $checkboxes;
//set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');
   $.cookie('new_cookie', options);

}

$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);

});

Answer 1

Make cookies last longer even when browser closes or in multitabs.
Try

var $checkboxes;
//set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');
   $.cookie('new_cookie', options,{expires:1});

}

$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);

});

And while loading or after refreshing page use

var alreadySetCookies= $.cookie('new_cookie').split(',');

for(var $cookie in alreadySetCookies) {
        $("input[name='" + alreadySetCookies[$cookie] + "']").attr("checked", "checked");
}