帶有jquery的復選框過濾產品，並通過重新加載保持狀態

Question

我想創建一個頁面，可以在其中過濾帶有復選框的產品，還可以在重新加載頁面時保留過濾器選擇。

<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>

我已經找到了兩個jquery腳本，它們兩個都可以正常工作。 我的意思是，我可以在選中/取消選中復選框時過濾產品。 選中復選框並重新加載頁面時，該復選框已正確選中，但尚未過濾產品。 因此，我需要合並2個腳本，以便在重新加載帶有選中復選框的頁面時也將對產品進行過濾。

希望有人可以在這里指導我。

-更新-

我在這里創建了一個示例：maxie.dk/filter.php

1）勾選一個復選框

2）產品篩選器已激活，僅顯示匹配值的產品

3）刷新頁面

4）選中的復選框保持原樣，但所有產品現在再次可見。 僅與選中的復選框匹配的產品應該是可見的。

謝謝

Answer 1

如果您的問題沒問題-您想將每次輸入更改時發生的“業務邏輯”移至單獨的功能，以便可以在重新加載頁面時執行。

...
// 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()

Answer 2

我已對此進行了重新編寫，以便它可以更新本地存儲並檢查並顯示保存在本地存儲中的產品。 它還將刪除或顯示選中的產品。 看看這個。

<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));               
      }
    });

在此處查看演示