获取多筛选值参数：基于SO实现复选框筛选搜索的JS代码问询

看起来你已经搞定了复选框选中状态的分组收集，就差把这些筛选值转换成合法的URL查询参数了对吧？下面给你两种适配不同后端需求的方案，都是用原生API避免手动拼接的编码问题：

1. 重复键名格式（推荐，适配多数后端框架） #

这种格式是?category=books&category=electronics，PHP、Express、Django等多数框架都能自动识别为数组。直接替换你代码里"遍历键并生成fdata参数..."的部分：

$('input[type="checkbox"]').on('change', function (e) { 
  var data = {}; 
  $('input[type="checkbox"]').each(function (i) { 
    if (this.checked) { 
      if (!data.hasOwnProperty(this.name)) { 
        data[this.name] = []; 
      } 
      data[this.name].push(this.value); 
    } 
  }); 

  // --- 替换后的参数生成逻辑 ---
  // 用原生URLSearchParams处理参数，自动编码特殊字符
  const params = new URLSearchParams();
  
  // 遍历每个筛选组（比如name为category的所有选中值）
  Object.entries(data).forEach(([filterName, selectedValues]) => {
    // 每个选中值都添加一次相同的参数名
    selectedValues.forEach(value => {
      params.append(filterName, value);
    });
  });

  // 更新浏览器URL（不刷新页面）
  const newUrl = `${window.location.origin}${window.location.pathname}?${params.toString()}`;
  window.history.pushState({}, '', newUrl);
});

额外优化：页面加载时回显选中状态 #

如果刷新页面后需要保留之前的筛选状态，在页面初始化时加这段代码：

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  $('input[type="checkbox"]').each(function() {
    // 检查当前复选框的值是否在URL参数的对应组里
    if (urlParams.getAll(this.name).includes(this.value)) {
      this.checked = true;
    }
  });
});

2. 数组后缀格式（适配特定后端要求） #

如果你的后端要求参数带[]后缀（比如?category[]=books&category[]=electronics），只需要修改参数的键名即可：

Object.entries(data).forEach(([filterName, selectedValues]) => {
  selectedValues.forEach(value => {
    // 给参数名加上[]后缀
    params.append(`${filterName}[]`, value);
  });
});

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