Set multiple cookies with the same code...using jQuery or JavaScript

Question

I tried but I can able to set only one cookie with my code...it needs some alteration only. I need to set cookies for the remain checkboxes too...how to do it in generic model using

$(document).ready(function() {
  ReadCookie();
});

function setCookie(c_name, value) {
  document.cookie = c_name + "=" + value;
}

function set_check() {
  setCookie('Cookie1', document.getElementById('cookie_setter').checked ? 1 : 0);
  ReadCookie();
}

function ReadCookie() {
  var allcookies = document.cookie;
  // Get all the cookies pairs in an array
  cookiearray = allcookies.split(';');

  // Now take key value pair out of this array
  for (var i = 0; i < cookiearray.length; i++) {
    name = cookiearray[i].split('=')[0];
    value = cookiearray[i].split('=')[1];
    console.log("Key is : " + name + " and Value is : " + value);
    if (value == "1") {
      console.log(value);
      document.getElementById('cookie_setter').checked = true;
    }
  }
}

<!DOCTYPE HTML>
<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
  <div style="max-width:980px;margin:0 auto;">
    <input type="checkbox" name="vehicle" id="cookie_setter" onchange="set_check();">Cookie1
    <br>
    <input type="checkbox" name="vehicle" value="Car">Cookie2
    <br>
    <input type="checkbox" name="vehicle" value="Car">Cookie3
  </div>
</body>

</html>

Refer : http://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript , and save data in JSON format — Pranav C Balan, Oct 30 '15 at 07:08

jmunsch · Accepted Answer · 2015-10-30T07:13:15.413

I simplified the iterations by adding the cookies to an object, added an onchange to each checkbox, and pass the element along see:

    function setCookie(c_name, value) {
      document.cookies = document.cookies || {};
      document.cookies[c_name] = value;
    }

    function set_check(e) {
      console.log(e.id)
      setCookie(e.id, document.getElementById(e.id).checked ? 1 : 0);
      ReadCookie();
    }

    function ReadCookie() {
      var allcookies = document.cookies;
      console.log(document.cookies)
      var div = document.getElementById('results');
      div.innerHTML = 'Results: ' + JSON.stringify(document.cookies);
    }

<!DOCTYPE HTML>
<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
  <div style="max-width:980px;margin:0 auto;">
    <input type="checkbox"
        name="vehicle0"
        id="cookie1"
        onchange="set_check(this);">Cookie1
    <br>
    <input type="checkbox"
        name="vehicle1"
        onchange="set_check(this);"
        id="cookie2"
        value="Car">Cookie2
    <br>
    <input type="checkbox"
        name="vehicle2"
        onchange="set_check(this);"
        id="cookie3"
        value="Car">Cookie3
  </div>
  <br>
  <div id='results'></div>
</body>

</html>

Set multiple cookies with the same code...using jQuery or JavaScript

1 Answers1