WordPress下jQuery Ajax搜索如何保存复选框选中状态

在WordPress平台开发的jQuery Ajax搜索功能中，需实现：用户勾选部分搜索结果的复选框后，进行多次搜索操作时，若新搜索结果包含之前已勾选的项，对应复选框自动保持选中状态。

解决方案 #

核心逻辑是维护一个全局的已选中ID集合，每次Ajax渲染新结果后匹配集合中的ID并勾选对应复选框，同时监听复选框变化更新集合。

步骤1：声明全局变量存储已选中ID #

在代码最顶部添加数组，保存所有已选中的广告ID：

$ = jQuery;
// 存储已选中的广告ID
var selectedAdIds = [];
var pafs = $("#post-ajax-filter-search");
var pafsForm = pafs.find("form");
var html;

步骤2：更新复选框事件，维护选中ID集合 #

修改模态框插入代码，通过事件委托监听动态生成的复选框，同步更新选中ID集合：

const $modalList = $('.en-ads-modal__list');
// 事件委托监听动态生成的复选框
$(document).on('change', '.ad-item__info--add-to-modal', function() {
  const checkbox = $(this);
  const adId = parseInt(checkbox.val());
  
  // 更新选中ID集合
  if (checkbox.is(':checked')) {
    if (!selectedAdIds.includes(adId)) {
      selectedAdIds.push(adId);
    }
  } else {
    selectedAdIds = selectedAdIds.filter(id => id !== adId);
  }
  
  // 生成模态框内容（原有逻辑保留）
  let modalContent = $('.ad-item__info--add-to-modal:checked').map((i, cb) => $(cb).closest('.ad-item').clone()).get();
  $modalList.html(modalContent);
});

步骤3：Ajax渲染后自动勾选已选中项 #

在Ajax请求的success回调中，渲染完列表后遍历选中ID集合，匹配并勾选对应复选框：

$.ajax({
  url: ajax_url,
  data: inputData,
  success: function (response) {
    pafs.find(".ajax_filter_search_results__list").empty();
    if (response) {
      for (var i = 0; i < response.length; i++) {
        html = ` 
                  <li class="ad-item" data-id="${response[i].id}">
                      <img src="${response[i].poster}" alt="${response[i].billboard}" class="ad-item__image--img">
                      <div class="ad-item__info">
                          <h4 class="ad-item__info--billboard">title: ${response[i].billboard}</h4>
                          <div class="ad-item__info--list">
                            <label class="ad-item__info--item ad-item__info--item-label">
                              <input type="checkbox" value="${response[i].id}" class="ad-item__info--add-to-modal">
                            add to output</label>
                          </div>
                      </div>
                  </li>
                  `;
        pafs.find(".ajax_filter_search_results__list").append(html);
      }
      
      // 自动勾选已选中的项
      selectedAdIds.forEach(adId => {
        pafs.find(`.ad-item__info--add-to-modal[value="${adId}"]`).prop('checked', true);
      });
    }
  },
});

可选优化：页面刷新后保留选中状态 #

若需要页面刷新后仍保留选中状态，可借助localStorage持久化存储：

• 更新选中集合时同步到localStorage：

// 复选框change事件中，更新数组后添加
localStorage.setItem('selectedAdIds', JSON.stringify(selectedAdIds));

• 页面初始化时从localStorage读取：

// 全局变量声明处修改
var selectedAdIds = JSON.parse(localStorage.getItem('selectedAdIds')) || [];

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