如何用jQuery实现复选框编码到查询字符串并解码控制图片展示？

一、复选框转多参数查询字符串（编码） #

监听复选框变更事件，收集选中项的键值对，用$.param正确生成多参数查询字符串后刷新页面。

给所有分类复选框添加统一类名category-checkbox，设置name为参数名（如check1、check3），value为分类值（如landscape、still-life），代码如下：

$('.category-checkbox').on('change', function() {
  const checkedData = {};
  // 遍历收集所有选中的复选框数据
  $('.category-checkbox:checked').each(function() {
    checkedData[$(this).attr('name')] = $(this).val();
  });
  // 生成查询字符串，无选中项时跳转到无参数页面
  const queryString = $.param(checkedData) ? '?' + $.param(checkedData) : '';
  window.location.href = window.location.pathname + queryString;
});

二、解析多参数查询字符串（解码） #

页面加载时解析URL参数，匹配对应分类的图片并设置显示状态。

给每个图片元素添加data-category属性，值与复选框的value对应（如<img class="gallery-item" data-category="landscape" src="xxx.jpg" style="display:none;">），代码如下：

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  
  // 无参数时可选择显示所有图片（根据需求调整）
  if (urlParams.size === 0) {
    $('.gallery-item').css('display', 'inline-block');
    return;
  }
  
  // 遍历参数，显示对应分类的图片
  urlParams.forEach(function(value) {
    $(`.gallery-item[data-category="${value}"]`).css('display', 'inline-block');
  });

  // 同步复选框选中状态（优化体验）
  urlParams.forEach(function(value, key) {
    $(`.category-checkbox[name="${key}"][value="${value}"]`).prop('checked', true);
  });
});

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