jQuery cookie plugin - set and retrieve on reload

Question

I have a set of checkboxes and I can't figure out how to create a cookie to remember which one of them has been checked on page reload. I am aware of jQuery cookie plugin but cookies, in general, is something I have no experience with whatsoever.Can anyone help me and show me how to approach this, please?

 <form>
        <div>
            <input type="checkbox" id="checkAll" checked>
            <label for="checkAll" class="label-header">Check All</label>                 
        </div>
     <div>               
            <input type="checkbox" id="check1" checked>
            <label for="option1">Option 1</label>
        </div>
        <div>                
         <input type="checkbox" id="check2" checked>
            <label for="option2">Option 2</label>
        </div>
        <div>                
            <input type="checkbox" id="check3" checked>
            <label for="option3">Option 3</label>
        </div>      
    </form>

Answer 1

1. Create a cookie with the default values when your page loads.
2. Update the cookie's settings when the checkboxes change (onchange).

For example:

In your document.ready:

Cookies.set('site_currency', currency, { expires: 7, path: '/' });

and in your change event:

Cookies.remove('site_currency', { path: '/' });
Cookies.set('site_currency', currency, { expires: 7, path: '/' });

This has been answered many times on stackoverflow, with my favorite page full of many suggestions and examples: How do I set/unset cookie ...?