从本地存储设置&获取复选框

Question

​

$("input[name='application']").click(function() {
  if ($(this).is(":checked")) {
    localStorage.setItem("APPLICATION", $(this).val());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
  <div class="border border-dark border-bottom-0 col-lg-3 d-flex align-items-center brdr">
    <h4>Application Type*</h4>
  </div>
  <div class="border border-dark border-bottom-0 d-flex align-items-center col-lg-1 brdr">
    <input type="checkbox" name="application" 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" class="check form-check-input me-2" required> Update
  </div>
</div>
<br>
<div class="d-flex justify-content-center">
  <input type="submit" id="submit" onclick="handleSubmit()">
</div>

​

​

$(function() {
  const application = localStorage.getItem("APPLICATION");
  if (application !== null) {
    $("input[name='application']").attr("checked", "checked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
  <div class="border border-dark border-bottom-0 col-lg-3 d-flex align-items-center brdr">
    <h4>Application Type*</h4>
  </div>
  <div class="border border-dark border-bottom-0 d-flex align-items-center col-lg-1 brdr">
    <input type="checkbox" name="application" 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" class="check form-check-input me-2" required> Update
  </div>
</div>

​

我有一个表单，在下一页提交表单后，我希望得到该值。所以我试着从当地的储藏室拿到这个。我试过这段代码，但不起作用。

Answer 1

1. 为您的两个复选框都提供了一个id属性，以便它们可以被标识为
2. 添加一个更改处理程序，以将id值添加或删除到第二个页面上的存储
3. 中，读取这些值并检查匹配的元素

两个页面的HTML

<input
  id="application-new"
  type="checkbox"
  name="application"
  class="check form-check-input me-2"
/> New

<input
  id="application-update"
  type="checkbox"
  name="application"
  class="check form-check-input me-2"
/> Update

第一页JS

// Store the set of IDs in a variable
const applicationChecks = new Set();

$(document.body).on("change", "input[name=application][id]", (e) => {
  const {
    target: { id, checked },
  } = e;

  // if checked, add the id, otherwise remove it
  applicationChecks[checked ? "add" : "delete"](id);

  // write to localStorage as an array
  localStorage.setItem("APPLICATION", JSON.stringify([...applicationChecks]));
});

第二页JS

jQuery(($) => {
  // load the id array from localStorage
  const applicationChecks =
    JSON.parse(localStorage.getItem("APPLICATION")) ?? [];

  // for each id, find the element and set its `checked` property
  $(applicationChecks.map((id) => `#${id}`).join(", ")).prop("checked", true);
});

​

​