Keep checkboxes checked even when page is reloaded using cookies

[QwikAd]

There are many many scripts out there that work, but they do not work in all browsers. Does anyone know (or wrote) a script that will keep multiple checkboxes checked even when the page is reloaded that works in ALL modern browsers? I’d prefer something in pure JS rather than jquery.

Thank you in advance!!

[AllanP]

@QwikAd

… keep multiple checkboxes checked even when the page is reloaded that works in ALL modern browsers?

The <input> element type=“checkbox” has an attribute “checked” which will remain in place through all page loads in any browser. Here is an example.

<input type="checkbox" name="a1" value="a1" checked>
<input type="checkbox" name="a2" value="a2" checked>
<input type="checkbox" name="a3" value="a3" checked>
<input type="checkbox" name="a4" value="a4" checked>

This will do the job for you if you want all four boxes always checked.

It will not help you if you want to retain 1,2 or 3 boxes that were checked prior to page load.

[QwikAd]

I know that. I wouldn’t post this question in javascript if I didn’t know how to do this via HTML. I need to keep them checked using either cookies or localStorage. I’d prefer localStorage but it’s nowhere to be found in IE 9+. LOL. So… I am looking to some good old javascript + cookie solution. If possible. Something similar to: http://hibbard.eu/blog/pages/persist-checkboxes/demo-1.html but it doesn’t work in IE.

[AllanP]

@QwikAd

I need to keep them checked using either cookies or localStorage.

The following script uses cookies to do what you want. It will only work if cookies are enabled on the client machine and the browser is set to accept cookies. Private browsing may prevent it working. Other than that, the checkboxes are checked correctly on page re-load or on going to another page and returning. The expiry date for each cookie is set for one day. You can change this in the script variable called “tomorrow” if necessary.

The script assumes consistency in the ID of the checkbox <input> elements. For this example I have used CB1 - CB4. The regex looks for CB and one digit. If you want to change the id syntax you will need to change the regex pattern as well.

HTML
     <div id="checks">
        <input id="CB1" type="checkbox" value="ON">
        <input id="CB2" type="checkbox" value="ON"> 
etc .....

<script type="text/javascript">
var dcSplit, posnEq, firstGrp, lastGrp, posnCB, regEx, i=0;
 dcSplit=document.cookie.split("; ");
 regEx=(/CB\d=/);           
 for(i=0; i<dcSplit.length; i++)
  { posnEq = dcSplit[i].indexOf("=")+1;      
    posnCB=dcSplit[i].search(regEx);
    if(posnCB != -1)
      { firstGrp = dcSplit[i].substring(posnCB, posnEq-1);
        lastGrp = dcSplit[i].substring( posnEq, dcSplit[i].length);  
        document.getElementById(firstGrp).checked=eval(lastGrp);        
    }  }     
// ------
 var now=new Date(), tomorrow, allInputs, cookieStr;
 tomorrow=new Date((now.setDate(now.getDate())+(1*24*60*60*1000))).toGMTString(); 
 allInputs=document.getElementById("checks").getElementsByTagName("input");
 for(i=0; i<allInputs.length; i++){ allInputs[i].onclick=writeCookie; }
// --------   
 function writeCookie()
   { cookieStr=this.id+"="+this.checked+"; expires="+tomorrow+"; path=/";       
     document.cookie=cookieStr;
   } 
 // -------     
</script>

There is a working example on JSFiddle.