Store Multiple Checkbox state from cookie using Jquery

Introduction: 

                  Here In this tutorial explain how to store cookie using the Jquery. 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 retrive the browser data after ones store in the browser. Thus the cookie is store in client side.

Screen Shot : 
                   

---

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.

---

 <script type="text/javascript">

        $(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>

---

This code is implemented and work propertly and if you have need to help or problem reguarding the above code then give the comment in below comment box

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email