表单提交重载后，如何保持勾选复选框对应的显示div状态？

这个问题很常见——页面刷新后JS的状态就重置了，毕竟浏览器不会自动记住这些动态变化。咱们可以通过状态持久化来解决，结合你的jQuery代码，给你两种实用的方案：

方案一：用本地存储持久化状态（推荐） #

这种方法会把复选框的状态存在浏览器里，即使关闭页面再打开也能保留（用sessionStorage的话只在当前会话有效）。

步骤1：修改点击事件，保存状态 #

把原来的点击事件改成这样，每次点击时把状态存到localStorage：

// 监听复选框点击
$('input#checkbox_other_certifications-0').click(function() {
  const isChecked = $(this).is(':checked');
  // 把状态存在本地存储，转成字符串（localStorage只能存字符串）
  localStorage.setItem('showOtherCertDiv', isChecked.toString());
  // 切换div显示/隐藏
  toggleOtherCertDiv(isChecked);
});

// 封装切换div的函数，复用性更强
function toggleOtherCertDiv(isShow) {
  $(".xde-element-input-text.xde-element-name-other_certifications").toggle(isShow);
}

步骤2：页面加载时恢复状态 #

页面刷新或重新打开时，读取本地存储的状态，同步复选框和div的状态：

$(document).ready(function() {
  // 读取本地存储的状态，默认不显示
  const shouldShow = localStorage.getItem('showOtherCertDiv') === 'true';
  // 同步复选框的选中状态
  $('input#checkbox_other_certifications-0').prop('checked', shouldShow);
  // 恢复div的显示状态
  toggleOtherCertDiv(shouldShow);
});

如果你希望状态只在当前浏览器会话有效（关闭页面就清空），把localStorage换成sessionStorage即可。

方案二：利用表单提交后的URL参数（适合GET请求） #

如果你的表单是用GET方法提交的，刷新后URL里会带复选框的参数（比如?checkbox_other_certifications-0=on），这时候可以直接从URL里读取状态：

$(document).ready(function() {
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  // 判断复选框是否被提交（即之前是否勾选）
  const isCheckedFromUrl = urlParams.has('checkbox_other_certifications-0');
  
  // 同步复选框和div状态
  $('input#checkbox_other_certifications-0').prop('checked', isCheckedFromUrl);
  $(".xde-element-input-text.xde-element-name-other_certifications").toggle(isCheckedFromUrl);
});

这种方法不用依赖本地存储，但只适用于GET提交的表单；如果是POST提交，URL里没有参数，还是用方案一更稳妥。

额外注意事项 #

• 如果你的表单是后端渲染的（比如PHP、Python后端），也可以让后端把复选框的状态回显到HTML里（比如给复选框加checked属性），然后JS只需要在页面加载时判断复选框的checked状态来切换div，这样更可靠，不需要前端存储。
• 记得测试边界情况：比如用户手动清除浏览器缓存后，本地存储的状态会消失，这时候会回到默认状态，这是正常的。

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