如何在点击浏览器后退/前进按钮后重置HTML表单复选框的值？

问题核心原因 #

1. HTML规范要求页面id唯一，你当前把hidden输入框和同名复选框的id设为完全相同，document.getElementById实际获取到的是排在前面的hidden元素，修改它的值不会影响复选框的展示状态。
2. 复选框的选中状态由checked布尔属性控制，你修改value属性仅会调整表单提交时的取值，不会改变复选框是否被勾选的视觉状态。

修复方案 #

步骤1：调整HTML代码，为复选框设置唯一id，避免和hidden元素冲突

<!-- 其余代码保持不变，仅修改复选框的id属性 -->
<input type="hidden" name="openStatus" value="off" >
<input type="checkbox" value = "on" id="openStatusCheckbox" name="openStatus" <?php echo $search['openStatus']=="on" ? 'checked' : ''; ?>/>
<label>include Open Requests</label>
<br>

<input type="hidden"  name="closedStatus" value="off" >
<input type="checkbox"  value = "on" id="closedStatusCheckbox" name="closedStatus" <?php echo $search['closedStatus']=="on" ? 'checked' : ''; ?>/>
<label>include Completed Requests</label>

步骤2：调整pageshow事件里的JS逻辑，通过修改checked属性控制复选框选中状态，同时删掉原有代码里多余的无效字符

<script>
  //added to fix back/forward button cache problem
  window.addEventListener("pageshow", () => {
     //these four work
     document.getElementById("keyword").value = "<?php echo $search['keyword']; ?>";
     document.getElementById("startDateRange").value = "<?php echo $search['startDateRange']; ?>";
     document.getElementById("endDateRange").value = "<?php echo $search['endDateRange']; ?>";
     document.getElementById("requestedBy").value = "<?php echo $search['requestedBy']; ?>";

     // 修改复选框的checked属性而非value
     document.getElementById("openStatusCheckbox").checked = <?php echo $search['openStatus'] == "on" ? 'true' : 'false'; ?>;
     document.getElementById("closedStatusCheckbox").checked = <?php echo $search['closedStatus'] == "on" ? 'true' : 'false'; ?>;
  });
</script>

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