快速提示：持續的複選框檢查後的狀態後重新加載

>本教程演示瞭如何在網頁上製作複選框，即使在頁面刷新或瀏覽器關閉後，他們的檢查/未檢查狀態也是如此。 這是使用瀏覽器的localStorageAPI實現的，可以通過保留用戶首選項來增強用戶體驗。

>該技術對於諸如站點偏好之類的設置特別有用（例如，在新選項卡中打開鏈接，隱藏元素）。 最後提供了一個演示。

密鑰點：

• 持續的複選框狀態通過記住跨頁重新加載的選擇來改善用戶體驗。
JavaScript中的
• >localStorage在用戶瀏覽器中提供持久存儲，即使關閉並重新打開瀏覽器後，仍保留數據。
• >可以添加“檢查/取消選中”功能，以方便地選擇，其狀態也存儲在localStorage>中。
• localStorage適用於非敏感數據；避免存儲憑據或個人信息。
>

複選框html：

最初的HTML包含帶有關聯標籤的複選框，分組用於造型容易：>

<code class="language-html"><div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>
  <button>Check All</button>
</div></code>

標籤對於可訪問性至關重要，允許通過標籤單擊進行選擇。

>

> javaScript（使用jQuery）： jQuery簡化了DOM操縱。 通過cdn包含它：

> JavaScript處理複選框狀態更改，將它們存儲在

<code class="language-html"></code>

中，然後將它們還原在頁面加載：

上 localStorage

此代碼有效地管理存儲並更新“檢查所有”按鈕的文本。

<code class="language-javascript">var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });
  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

$checkboxes.on("change", function(){
  updateStorage();
  updateButtonStatus();
});

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true);
  updateStorage();
  updateButtonStatus();
}

$button.on("click", handleButtonClick);


$.each(formValues, function(key, value) {
  if (key !== "buttonText") {
    $("#" + key).prop('checked', value);
  }
});

$button.text(formValues["buttonText"]);
</code>

檢查/取消選中所有功能：

“檢查所有”按鈕切換所有復選框的狀態和更新。

演示：localStorage

>一個工作演示顯示持續的複選框行為[此處] 結論：

此方法有效利用

創建持久的複選框，增強用戶體驗並提供“檢查/取消選中”功能的清潔實現。 請記住，

不適合敏感數據。 提供的常見問題解答進一步澄清了該技術的各個方面。 >

以上是快速提示：持續的複選框檢查後的狀態後重新加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！