使用Javascript在表单之间传递数据时预先检查复选框

Pre checking checkbox when passing data between forms using Javascript

本文关键字：检查 复选框 数据 Javascript 表单 之间 使用      更新时间：2023-09-26

我正在使用Javascript在页面之间传递数据的HTML表单上工作，除了复选框之外，我在大多数情况下都是成功的。是否有可能确保复选框在进入下一页时保持选中状态?还是将复选框放在提交实际信息的第二页更好?谢谢!

这是一个使用sessionStorage保存复选框状态的示例。即使重新加载页面，复选框的状态也会保留。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function loadOldValues(){
        checkboxes = document.querySelectorAll("input[type=checkbox]")
        for(var i = 0; i < checkboxes.length; ++i){
          if(sessionStorage.getItem(checkboxes[i].id) == "true"){
            checkboxes[i].checked = true
          }
        }
      }
      function saveOldValues(){
        checkboxes = document.querySelectorAll("input[type=checkbox]")
        for(var i = 0; i < checkboxes.length; ++i){
          checkboxes[i].addEventListener("change", function(){
            sessionStorage.setItem(this.id, this.checked)
          })
        }
      }
      addEventListener("load", loadOldValues)
      addEventListener("load", saveOldValues)
    </script>
  </head>
  <body>
    <form>
      Form:<br>
      <label for="checkbox1">Check 1:</label>
      <input type="checkbox" id="checkbox1"><br>
      <label for="checkbox2">Check 2:</label>
      <input type="checkbox" id="checkbox2"><br>
    </form>
  </body>
</html>

您可以在这里找到更多关于存储的信息:http://www.html5rocks.com/en/features/storage

相关文章：