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

Question

除非用户单击后退/前进，否则一切正常。此时复选框值不会重置为先前的状态。

我有一个 HTML 表单（带有 php）来输入搜索条件，并带有一个提交按钮来执行搜索。我为两个复选框使用了隐藏的输入字段，以在提交执行后保留该值。看起来像这样：

search.php

          <?php
              $search = [];
              $search['keyword'] =  $_GET['keyword'] ?? '';
              $search['startDateRange'] =  $_GET['startDateRange'] ?? '';
              $search['endDateRange'] =  $_GET['endDateRange'] ?? '';
              $search['requestedBy'] =  $_GET['requestedBy'] ?? '';

              if (isset($_GET['openStatus'])) {
                $search['openStatus'] = $_GET['openStatus'];
              } else {
                $search['openStatus'] = "on";
              }

              if (isset($_GET['closedStatus'])) {
                $search['closedStatus'] = $_GET['closedStatus'];
              } else {
                $search['closedStatus'] = "on";
              }
          ?>

          <form action="search.php" autocomplete="off" id="searchCriteria">
                
                <label>Keyword</label>
                <input type="text" autocomplete="off" value = "<?php echo $search['keyword']; ?>" name="keyword" id="keyword" />
                <br>
                <label>Request Date</label>
                <input type="date" value = "<?php echo $search['startDateRange']; ?>" name="startDateRange" id="startDateRange" />
                <label>to</label>
                <input type="date" value = "<?php echo $search['endDateRange']; ?>" name="endDateRange" id="endDateRange"/>
                <br>
                <label>Requested By</label>
                <input type="text" value = "<?php echo $search['requestedBy']; ?>" name="requestedBy" 
                id="requestedBy"/>
                <br>

                <input type="hidden" name="openStatus" value="off" >
                <input type="checkbox" value = "on" id="openStatus" 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="closedStatus" name="closedStatus" <?php echo $search['closedStatus']=="on" ? 'checked' : ''; ?>/>
                <label>include Completed Requests</label>
                <br>
                
                <input type="submit" value="Refine Search">
                
                <button onclick="location.href='index.php'" type="button">
                Back to Requests</button>
                
              
            </form>

在用户点击后退按钮之前，这可以正常工作。为了解决这个问题，我添加了以下 javascript：

<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']; ?>";

     //these two don't work
     document.getElementById("openStatus").value = "<?php echo $search['openStatus']; ?>";
     document.getElementById("closedStatus").value = "<?php echo $search['closedStatus']; ?>";
  >";
  });
</script>

此 javascript 正确重置文本类型输入值，但不会重置复选框字段。我认为问题在于我使用了隐藏的输入字段，但我不清楚如何解决它。任何帮助表示赞赏！

标签： javascriptphphtml