Question

I am currently developing a shopping cart solution and I have a field, which is used for tax.

What I’m looking to do, is when the user selects the checkbox field for tax, then this is stored in the cookie, so when they go to other pages and then return to the cart, then these fields are checked.

I am using http://plugins.jquery.com/project/Cookie to achieve this.

I can create the cookie for the checkboxes, but I am struggling to then check the cookie and if it was for a checkbox, then set the checkbox as ‘checked’.
I also need, the deletion of cookies. When the user unchecks the box, to the call something like $.cookie(“vat_1”, null)

I have the following code so far:

$(document).ready( function() {
    $('input:checkbox[name="<?php echo $prod; ?>"]').click(function() { 
        var name = $(this).attr("name"); 
        var value = $(this).val(); 
        var date = new Date();
        date.setTime(date.getTime() + (30 * 60 * 1000));

        $.cookie(name, value, { expires: date });//Set the expires time as per your requirement.  
        cookie = $.cookie(name);

        alert(cookie);    
    }) 
});

All help is muchly appreciated.

Thanks

Answer 1

To support loading the previously checked boxes, at the top of the document.ready() function, insert the following code:

$('input:checkbox').each(function(index) {
    cookie = $.cookie($(this).attr("name"));
    if (cookie == 1) {
        $(this).prop('checked', true);
});

This should loop through each checkbox on the page, lookup the relevant cookie, and alter the checkbox accordingly.

In terms of deleting the cookies and setting them correctly in the first place, you should not be using the val() of the checkbox. Instead you should be looking up its checked property:

$('input:checkbox[name="<?php echo $prod; ?>"]').click(function() { 
    var name = $(this).attr("name"); 
    var value = $(this).prop('checked'); 
    var date = new Date();
    date.setTime(date.getTime() + (30 * 60 * 1000));

    if (value) {
        $.cookie(name, 1, { expires: date });
    } else {
        $.cookie(name, null);
    }

    cookie = $.cookie(name);

    alert(cookie);    
})

These two pieces of code should be combined as such

$(document).ready( function() {
    //first code above
    //second code above
});