How to remove unchecked check-box values from cookie using jQuery?

Question

I'm trying to write a script where the unchecked values of a set of check-box are removed from a cookie. I am using jQuery's cookie plugin below is my current function which is called when a check-box is called;

<script type="text/javascript">
 jQuery(document).ready(function($){
    $("input[type=checkbox]").each(function () {
      $(this).change(updateCount);
    });

    updateCount();

    function updateCount () {

      var val;
      var my_cookie
      var new_my_cookie;

    $(':checkbox:checked').each(function(){
      val= $(this).val();
      my_cookie=$.cookie("chosen_ones");
      $.cookie("chosen_ones", null);
      new_my_cookie=my_cookie+"|"+val;
      $.cookie("chosen_ones", new_my_cookie);
    });

    //somehow need to remove values from cookie when unchecked here

      var length = $.cookie("chosen_ones").split("|").length;
      length=length-1;
      $("#count").text(length);
      $("#status").toggle(length >= 0);
    };
  });
</script>

Any help would be welcomed.

Answer 1

don't remove the value. On each checkbox change you just fetch all the checked checkboxes (as you do now), add them in one string (or using json?), store them in the cookie as 'checkedboxes' or something. If you uncheck a checkbox you can just run the same function, fetching all checked checkboxes, leaving the one you just unchecked out, and overwrite the current checkedboxes in you cookie, no?

//Edit

Wrote a little example with JSON object in a cookie. Works on multiple pages :-) http://labs.joggink.be/json-checkbox-cookie/

Answer 2

If you need an answer without json2 ( I mean not everybody knows json2 ) you can use this answer; (And if you like it maybe you could rate it :D )

<script type="text/javascript">

//Adds new uniqueArr values to temp array
    function uniqueArr(a) {
     temp = new Array();
     for(i=0;i<a.length;i++){
      if(!contains(temp, a[i])){
       temp.length+=1;
       temp[temp.length-1]=a[i];
      }
     }
     return temp;
    }


    //Will check for the Uniqueness
    function contains(a, e) {
     for(j=0;j<a.length;j++)if(a[j]==e)return true;
     return false;
    }

 jQuery(document).ready(function($){
    $("input[type=checkbox]").each(function () {
      $(this).change(updateCount);
    });

    updateCount();



    function updateCount () {

      var val;
      var my_cookie="";
      var new_my_cookie="";
      var cookie_array;
      var new_cookie_array;
      var new_cookie_string="";
      var number=0;
      var temp_cookie="";

      my_cookie=$.cookie("chosen_ones");

    $(':checkbox:checked').each(function(){
      val= $(this).val();
      if((val!=null)&&(val!="")){
        my_cookie=val+"|"+my_cookie;
      }


    });

    new_cookie_array=uniqueArr(my_cookie.split("|"));

    $.each(new_cookie_array, function(index, values) {
            if((values!="")&&(values!="null")&&(values!=null)){
                temp_cookie=values+"|"+temp_cookie;
            }
        });

    $.cookie("chosen_ones", null);
    $.cookie("chosen_ones", temp_cookie);

    var cookie_array=$.cookie("chosen_ones").split("|");

    $(':checkbox:not(:checked)').each(function(){
      val= $(this).val();
      $.each(cookie_array, function(index, values) {
               if((values==val)&&(values!=null)&&(values!="")&&(values!="null")&&(values!="")){
                cookie_array[index]="";
            }
        });
    });

      new_cookie_array=uniqueArr(cookie_array);

      $.each(new_cookie_array, function(index, values) {
            if((values!="")&&(values!=null)&&(values!="null")){
                new_cookie_string=new_cookie_string+"|"+values;
            }
        });

      $.cookie("chosen_ones", null);
      $.cookie("chosen_ones", new_cookie_string);
      alert($.cookie("chosen_ones"));
      var temping_string=$.cookie("chosen_ones");
      $("#count").text(temping_string.split("|").length-1);
      $("#status").toggle(temping_string.split("|").length-1 >= 0);
    };
  });
</script>