jQuery通过localStorage存取checkbox值跨页不生效问题

• 复选框未配置value属性：原HTML中两个复选框没有设置对应的值，调用$(this).val()无法获取到区分"New""Update"的有效标识，默认只会返回空或"on"。
• 存储逻辑不符合复选框特性：原代码每次点击单个选中项就直接覆盖localStorage存储值，且未处理取消选中的场景，既无法支持多选场景，也会出现存储值和实际选中状态不一致的问题。
• 回显逻辑错误：原第二页代码只要检测到localStorage有值，就会把所有同名复选框全部勾选，完全没有匹配实际存储的选中项。
• 提交逻辑缺失：原代码绑定了handleSubmit()点击事件但未定义该函数，点击提交时既不会统一收集选中值，也可能在存储未完成时就触发页面跳转，导致值丢失。
• 状态设置方法错误：使用attr()设置复选框选中状态属于操作初始属性，动态修改表单状态时容易出现UI和实际值不同步的问题，应该使用prop()方法。

表单页（第一页）修改 #

1. 给两个复选框补充对应的value属性，修改对应HTML片段：

<div class="border border-dark border-bottom-0 d-flex align-items-center col-lg-1 brdr">
  <input type="checkbox" name="application" value="new" class="check form-check-input me-2" required> New
</div>
<div class="border border-dark d-flex align-items-center col-lg-2 brdr">
  <input type="checkbox" id="update" name="application" value="update" class="check form-check-input me-2" required> Update
</div>

2. 删除原有单复选框点击存储的逻辑，新增统一提交处理函数，在提交时收集所有选中值再存储，完成后跳转页面：

function handleSubmit() {
  // 收集所有选中的复选框值
  const selectedValues = [];
  $("input[name='application']:checked").each(function () {
    selectedValues.push($(this).val());
  });
  // localStorage仅支持存储字符串，将数组序列化为JSON格式存储
  localStorage.setItem("APPLICATION", JSON.stringify(selectedValues));
  // 替换为实际的第二页地址
  window.location.href = "result.html";
}

回显页（第二页）修改 #

替换原有回显逻辑，解析存储的选中值列表，匹配对应复选框完成勾选：

$(function() {
  const appStorage = localStorage.getItem("APPLICATION");
  if (appStorage) {
    const selectedApps = JSON.parse(appStorage);
    $("input[name='application']").each(function () {
      // 匹配存储值，用prop设置选中状态保证状态同步
      if (selectedApps.includes($(this).val())) {
        $(this).prop("checked", true);
      }
    });
  }
});

补充说明：如果业务规则里Application Type是单选，直接把复选框type="checkbox"改成type="radio"即可，存储和回显逻辑不需要大改，只需要把收集值的逻辑改成取单选选中项的单个值即可。

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