Question

我有一个可以通过复选框排序的列表。我写了一个应该存储检查值的小脚本，以便刷新过滤后的列表显示与离开页面之前相同的项目。

目前，当我刷新它时，会检查我的所有复选框，而不仅仅是我检查过的复选框。

以下是我的输入设置方式：

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

这是我的功能，应该保持相同的检查：

$(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");
    }

});

要检查＆＃34;以上所有＆＃34;会出现什么问题？

感谢您的帮助！

Answer 1

更新回复

您的codepen中发生了一些事情。这是我的建议：

首先，添加一个数据属性，如下所示：

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

更新您的点击处理程序更像是这样：

$("input[name='filters']").click(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

 var data = $(this).data('filter-by');
 var index = items.indexOf(data);

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

  localStorage.setItem("filter-by", JSON.stringify(items));
});

最后，更新预选复选框的代码，使其更像是这样：

$(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

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

这有意义吗？

原始回复

这一行...

$("input[name='filters']").attr("checked", "checked");

检查所有名为＆＃34;过滤器＆＃34;的输入。 - 不仅仅是个人。我怀疑你的意思要做的是迭代过滤器复选框，只选择val()值与localstorage中存储的项匹配的那些。所以像这样......

$("input[name='filters']").each(function(index, input) {
  if ($(input).val() === data) {
    $(input).attr('checked', 'checked');
  }
});

我还应该指出，您在一个地方写信filter-by并在下面两行中删除filters。那些应该是同一把钥匙。

在angular中使用本地存储来存储选中的复选框

1 个答案: