set jQuery cookie for each checkbox

Question

I have a simple jQuery function that toggles classes based on checkbox states. Here's the code:

jQuery:

  $('input[name$="bg-noise-option"]').click(function(){
    var targetClass = $(this).data('at');
    $('.' + targetClass).toggleClass('bg-noise');
  });

HTML:

  <div class="checkbox">
    <label>
      <input type="checkbox" name="bg-noise-option" data-at="page-wrap" checked>
      Body <br>
    </label>
    <label>
      <input type="checkbox" name="bg-noise-option" data-at="btn">
      Elements <br>
    </label>
    <label>
      <input type="checkbox" name="bg-noise-option" data-at="header, .navbar">
      Top Header <br>
    </label>
    <label>
      <input type="checkbox" name="bg-noise-option" data-at="page-header-wrap">
      Page Header <br>
    </label>
    <label>
      <input type="checkbox" name="bg-noise-option" data-at="site-footer">
      Footer <br>
    </label>
  </div>

Question: How to create a cookie for each checkbox checked? I'm simply trying to give these checkboxes some memory... not sure of the best way.

I suspect some type of .each(function) should do it, but I'm still quite the javascript novice. I've tried the following:

$.each(function(){
  $.cookie('bg-noise-cookie', $(this).data('at'), {expires:365, path: '/'});
})

But of course that only creates one cookie for the most recently checked box. How to create a unique cookie for each? Or do I even need to? Perhaps there's a way to store them in one cookie (an array?) and then simply reference the array on page load to check the checkboxes?

Much obliged for insight.

Answer 1

This assumes you're using the JQuery Cookie Plugin , since I see you referenced it in your question.

Here you are. Creates and alters a single cookie file upon any checkbox click, storing only those data-at values that correspond to checked boxes.

On page load, it retrieves that JSON string, coverts it back to an object, then loops through, applying a check to the box of any matching attribute.

Code tested and working.

HTML: I added '[]' to your checkboxes to properly group them and removed any default checked boxes.

<div class="checkbox">
    <label>
        <input type="checkbox" name="bg-noise-option[]" data-at="page-wrap">
        Body <br>
    </label>
    <label>
        <input type="checkbox" name="bg-noise-option[]" data-at="btn">
        Elements <br>
    </label>
    <label>
        <input type="checkbox" name="bg-noise-option[]" data-at="header, .navbar">
        Top Header <br>
    </label>
    <label>
        <input type="checkbox" name="bg-noise-option[]" data-at="page-header-wrap">
        Page Header <br>
    </label>
    <label>
        <input type="checkbox" name="bg-noise-option[]" data-at="site-footer">
        Footer <br>
    </label>
</div>

JQuery: using $.cookie() plugin

<script type="text/javascript">
    $(document).ready(function() {
        // check for cookie on load
        if( $.cookie('chk_ar') ) {
            console.log($.cookie('chk_ar'));
            var chk_ar = $.cookie('chk_ar');

            // convert string to object
            chk_ar = $.parseJSON(chk_ar);
            console.log(chk_ar);

            // loop through and apply checks to matching sets
            $.each(chk_ar, function(index, value) {
                console.log(value);
                $('input').filter('[data-at="'+value+'"]').prop('checked', true);
            });
        }
    });

    // handle checkboxes
    $('input[name="bg-noise-option[]"').on('click', function() {
        var check_array = [];

        // add to array
        $(':checked').each(function() {
            check_array.push($(this).attr('data-at'));
        });

        // stringify array object
        check_array = JSON.stringify(check_array);
        console.log(check_array);

        // set cookie
        $.cookie('chk_ar', check_array, {path:'/'});
    });
</script>