如何通过复选框选中值更新URL为?filter=参数格式而非hash锚点

你原有逻辑已经完成了选中值收集、页面初始化回显两个核心部分，只需要把读写location.hash的逻辑替换为查询参数操作即可，不需要改动原有HTML结构。

核心修改逻辑 #

• 废弃原来对location.hash的读写，改用浏览器原生URLSearchParamsAPI处理查询字符串
• 更新URL时使用history.replaceState方法，不会触发页面刷新，和原有hash方案的交互体验完全一致
• 无选中项时自动移除URL上的filter参数，保持URL整洁
• 优化了属性选择器的写法，加引号包裹值，避免后续筛选值含特殊字符时报错

修改后完整JS代码 #

$(function() {
  // 监听复选框变化，同步更新URL参数
  $(".vegetables, .seasoning").on("change", function() {
    // 收集所有已选中的筛选项值，沿用逗号拼接规则
    const filterStr = $(".vegetables:checked, .seasoning:checked")
      .map(function() { return this.value; })
      .toArray()
      .join(",");

    // 基于当前地址构造URL对象
    const targetUrl = new URL(window.location.href);
    if (filterStr) {
      targetUrl.searchParams.set("filter", filterStr);
    } else {
      // 没有选中项时删除filter参数
      targetUrl.searchParams.delete("filter");
    }
    // 替换当前历史记录，无刷新更新URL
    history.replaceState(null, "", targetUrl.toString());
  });

  // 页面初始化时从URL读取filter参数，回显选中状态
  const searchParams = new URLSearchParams(window.location.search);
  const savedFilter = searchParams.get("filter");
  if (savedFilter) {
    savedFilter.split(",").forEach(function(val) {
      $(`input[value="${val}"]`).prop("checked", true);
    });
  }
});

效果说明 #

• 单选Potato时URL为example.com?filter=potato，符合需求
• 多选多个选项时URL为example.com?filter=potato,salt,pepper，和之前hash的拼接规则完全一致，不需要调整其他关联逻辑
• 直接访问带filter参数的链接时，会自动勾选对应选项，和原有hash方案的回显逻辑一致
• 所有选项取消勾选时会自动清除URL上的filter参数，回到干净的根地址

内容的提问来源于stack exchange，提问作者Aaron