Qfyilyi

I want to create a page where I can filter products with checkboxes but also to keep the filter choices on page reload.

<div class="checkbox checkbox-success checkbox-inline ">

<input type="checkbox" id="1" value="option1" >

<label for="1">Adidas</label>

</div>

<div class="checkbox checkbox-success checkbox-inline ">

<input type="checkbox" id="2" value="option2" >

<label for="1">Nike</label>

</div>



<script>

    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},

    $checkboxes = $("#checkbox-container :checkbox");



$checkboxes.on("change", function(){

  $checkboxes.each(function(){

    checkboxValues[this.id] = this.checked;

  });



  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));

});



// On page load

$.each(checkboxValues, function(key, value) {

  $("#" + key).prop('checked', value);

});



$('input[type="checkbox"]').change(function() {

    if ($('input[type="checkbox"]:checked').length > 0) {

        $('.products >div').hide();

        $('input[type="checkbox"]:checked').each(function() {

            $('.products >div[data-category=' + this.id + ']').show();

        });

    } else {

        $('.products >div').show();



    }

});

</script>

I have found both jquery scripts and they both work fine by themselves. By this I mean that I can get to filter the products when checking/unchecking the checkboxes. When checking a checkbox and reloading the page, the checkbox is correctly checked but products has not been filtered. So I need to merge the 2 scripts so that products also will be filtered when reloading the page with a checked checkbox.

Hope someone can guide me a bit here.

--- UPDATE ---

I have created an example here: maxie.dk/filter.php

1) Tick a checkbox

2) Product filter is activated and only products with matching value is displayed

3) Refresh page

4) Checkbox checked is kept as it should but all products are now again visible. Only matching products to the ticked checkbox should be visible.

Thanks

If I get your issue right - you want to move your "business logic" that happens on each input change to a separate function so that it can be executed also upon page reload.

...

// On page load

$.each(checkboxValues, function(key, value) {

  $("#" + key).prop('checked', value);

});



// your business logic

function updateProducts() {

    if ($('input[type="checkbox"]:checked').length > 0) {

        $('.products >div').hide();

        $('input[type="checkbox"]:checked').each(function() {

            $('.products >div[data-category=' + this.id + ']').show();

        });

    } else {

        $('.products >div').show();



    }

}



$('input[type="checkbox"]').change(function() {

    // execute for each change

    updateProducts();

});



// execute on page load

updateProducts()

I have re-write this such that it will update the localstorage and also check and show product that is save in localstorage. It will also remove or show product on checked. Check it out.

<div class="col-xs-12 col-sm-12">

  <div class="breadcrumb" id="checkbox-container">

    <h4 class="visible-xs"></h4>

    <span class="hidden-xs"></span>



    <div class="checkbox checkbox-success checkbox-inline ">

      <input type="checkbox" id="1" value="1" />

      <label for="1">Adidas</label>

    </div>

    <div class="checkbox checkbox-success checkbox-inline ">

      <input type="checkbox" id="2" value="2" />

      <label for="2">Reebok</label>

    </div>

    <div class="checkbox checkbox-success checkbox-inline ">

      <input type="checkbox" id="3" value="3" /> <label for="3">Nike</label>

    </div>



    ´

  </div>

</div>



<div class="products">

  <div

    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "

    data-category="1" >

    PRODUCT 1

  </div>

</div>

<div class="products">

  <div

    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "

    data-category="1">

    PRODUCT 2

  </div>

</div>

<div class="products">

  <div

    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "

    data-category="2"

  >

    PRODUCT 3

  </div>

</div>

<div class="products">

  <div

    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "

    data-category="3"

  >

    PRODUCT 4

  </div>

</div>





var checkedValues =JSON.parse(localStorage.getItem('checkboxValues')) || ,

      $checkboxes = $("#checkbox-container input[type=checkbox]");



        function loadPrevious(){

           if(checkedValues.length>0){

            $("div.products > div").hide();

                $.each(checkedValues,function(i,v){

                     $("#checkbox-container input[type=checkbox]#" + v ).prop('checked',true);

                     $('.products >div[data-category=' + v + ']').show();

                })

           }



      }



    loadPrevious();



    $checkboxes.change(function(e) {

      e.preventDefault();

      if($(this).prop("checked") == true){

           checkedValues.push($(this).attr("id"));

            loadPrevious();

           localStorage.setItem("checkboxValues", JSON.stringify(checkedValues));               

      }else{

           var checkId = $(this).attr("id"),

           arr = JSON.parse(localStorage.getItem('checkboxValues'));

           $('.products >div[data-category=' + checkId + ']').hide();

           var newArr = $(arr).not([checkId]).get();

            localStorage.setItem("checkboxValues", JSON.stringify(newArr));               

      }

    });

See the demo here