在本地存储中选中复选框，但在加载时也要筛选列表

Keeping a checkbox checked with local storage but also filter a list on load

本文关键字：列表 筛选 加载 存储 复选框      更新时间：2023-09-26

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

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

谢谢你们的帮助！

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

相关文章：