Store Multiple Checkbox state from cookie using Jquery

In this tutorial we have explain how to store cookie using the Query. some times we need to store multiple state of checkbox in cookie and need to retrieve it from user browser when the current page is expire or user can visit next time then cookie are best option to retrieve the browser data after ones store in the browser

HTML Code :

<div id=”dvChkBox”>
<input id=”high” name=”high” type=”checkbox” /> high
<input id=”low” name=”low” type=”checkbox” /> low
<input id=”open” name=”open” type=”checkbox” /> open
<input id=”close” name=”close” type=”checkbox” /> close
</div>

Now here we can create and read cookie with the multiple checkbox using the jquery. first create cookie with setCookie() and read it from the getCookie() function.

Cookie value set using the synatax :

setCookie(‘cookiename’, options,365);

here first parameter is cookiename and second parameter is cookievalue and in third parameter we can set the cookie expire time whatever we can want.

For Create and Read multiple cookie value jquery code is below.

$(function () {
var $ck = $(“#dvChkBox input:checkbox”); // here we can find the checkbox from the div
$ck.click(function () { //when click on checkbox it can store in cookie
var $chkboxes = $(“#dvChkBox input:checkbox”);
var options = $chkboxes.map(function () {
if (this.checked) return this.name;
}).get().join(‘,’);

// here we can set cookie nane,cookie value and cookie expire time
setCookie(‘cookiename’, options,365);
});
});

var $chkboxes = $(“#dvChkBox input:checkbox”);
$chkboxes.change(setCookie); // when the checkbox state is change than set the cookie value
$(document).ready(function () {

var ckvalue = getCookie(‘cookiename’).split(‘,’);
$chkboxes.prop(‘checked’, false);
for (var $m in ckvalue) {
$(“input[name='” + ckvalue[$m] + “‘]”).prop(‘checked’, true);
}
});

// Here using setCookie() function we store cookie value and cookie expire time
function setCookie(ckname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = “expires=” + d.toUTCString();
document.cookie = ckname + “=” + cvalue + “; ” + expires;
}

// Here using getCookie() function we can read cookie value
function getCookie(ckname) {
var name = ckname + “=”;
var ca = document.cookie.split(‘;’);
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ‘ ‘) c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return “”;
}
</script>

Store Multiple Checkbox state from cookie using Jquery

Store Multiple Checkbox state from cookie using Jquery, this code is tested and working well as per my implementation, and if you have any query regarding code then feel free to comment on comment section.

SEE MORE

codelerner

Header

Pages

Categories

Store Multiple Checkbox state from cookie using Jquery

Store Multiple Checkbox state from cookie using Jquery

5 Comments

Leave a Reply Cancel reply