Javascript 在本地存储中保持复选框处于选中状态，但也会在加载时筛选列表

好的，这是一个由两部分组成的问题，我最初发布了这个函数：

$(function () {
    var data = localStorage.getItem("filter-by");

    if (data !== null) {
        $("input[name='filters']").attr("checked", "checked");
    }


});



$("input[name='filters']").click(function () {

    if ($(this).is(":checked")) {
        localStorage.setItem("filter-by", $(this).val());
    } else {
        localStorage.removeItem("filters");
    }

});

$("input[name='filters']").click(function () {
  var items = localStorage.getItem("filter-by") || [];
  var data = this.data('filter-by');

  if ($(this).is(":checked")) {
    items.push(data);
  } else if (items.indexOf(data) >= 0) {
    items.splice(items.indexOf(data), 1);
  }

  if (items.length > 0) {
    localStorage.setItem("filter-by", items);
  } else {
    localStorage.removeItem("filter-by");
  }
});


$(function () {
  var items = localStorage.getItem("filter-by") || [];

  $("input[name='filters']").each(function(index, input) {
    var data = $(input).data('filter-by');
    if (items.indexOf(data) >= 0) {
      $(input).attr('checked', 'checked');
    }
  });
});

作为我的开始，请在使用本地存储加载后重新选中复选框。经过一些尝试和错误后，有人能够帮助我编写此新函数：

$(function () {
    var data = localStorage.getItem("filter-by");

    if (data !== null) {
        $("input[name='filters']").attr("checked", "checked");
    }


});



$("input[name='filters']").click(function () {

    if ($(this).is(":checked")) {
        localStorage.setItem("filter-by", $(this).val());
    } else {
        localStorage.removeItem("filters");
    }

});

$("input[name='filters']").click(function () {
  var items = localStorage.getItem("filter-by") || [];
  var data = this.data('filter-by');

  if ($(this).is(":checked")) {
    items.push(data);
  } else if (items.indexOf(data) >= 0) {
    items.splice(items.indexOf(data), 1);
  }

  if (items.length > 0) {
    localStorage.setItem("filter-by", items);
  } else {
    localStorage.removeItem("filter-by");
  }
});


$(function () {
  var items = localStorage.getItem("filter-by") || [];

  $("input[name='filters']").each(function(index, input) {
    var data = $(input).data('filter-by');
    if (items.indexOf(data) >= 0) {
      $(input).attr('checked', 'checked');
    }
  });
});

通过这个函数，我可以存储选中的复选框，但是列表不会过滤。如何在刷新时使用我的任何一个函数进行列表筛选

我使用的输入如下所示：

<input type="checkbox" name="filters" data-filter-by="Brand A" ng-click="includeBrand('Brand A')" />Brand A

品牌A

---

谢谢你们的帮助

您必须触发单击事件，或者需要为页面加载上的每个选中项调用includeBrand（filterString）函数。

我如何触发单击事件？这是一个基本的Jquery语句。对于您的循环，这应该有效：$（输入）.trigger（'click'）；onClick（）？我在JS/jQuery方面不是很在行。为什么我需要点击事件？Onload，在访问后，它将复选框保存为单击/选中，但不保存筛选列表？以编程方式将复选框的状态设置为“选中”，不会自动触发单击。您正在通过单击筛选数据。