如何序列化取消选中复选框？-解网

问：

我正在尝试使用 unobtrusive-ajax 来允许网站将其内容更新为 AJAX（如果 JavaScript 可用）和静态页面（如果没有）。我想支持浏览器的按钮在历史记录中向后移动。Back

我正在使用 JavaScript 的历史记录 API 在用户浏览网站时操作浏览器历史记录。我将 HTML（通过）和 DOM 的当前状态（通过 JQuery 的方法）存储在 history 对象中。当用户点击时，HTML 和 DOM 将分别从缓存的 HTML 和序列化的 DOM 中恢复。innerHTMLserializeBack

但是，我丢失了有关在页面加载（）时选中但用户未选中的复选框的信息。"checked"="checked"

根据 JQuery 文档，网址为 https://api.jquery.com/serialize/

复选框和单选按钮（类型为“radio”或“checkbox”的输入）中的值仅在选中时才包括在内。

此处的“值”是指选中状态，而不是复选框的状态。value

这是一个错误的设计吗？当它与 HTML 不同时，它不应该包含检查值吗？

有条件序列化的其他元素上是否有其他属性？

HTML jQuery DOM unobtrusive-ajax

// Check box state array
let checkboxesState = []

// If that is the very first page load and there is no local storage.
if(localStorage.getItem("checkedCheckboxes") === null){

  $("input[type='checkbox']").each(function(index){
    checkboxesState.push(this.checked)

    // Add a data attribute for the index of the checkbox
    this.setAttribute("data-chk_index",index)
  })
  // Save
  localStorage.setItem("checkedCheckboxes", JSON.stringify(checkboxesState))
}

// If there already is a checkbox state storage
else{
  checkboxesState = JSON.parse(checkboxesState)
  
  $("input[type='checkbox']").each(function(index){
    this.checked = checkboxesState[index]

    // Add a data attribute for the index of the checkbox
    this.setAttribute("data-chk_index",index)
  })
}

// Update the array on click
$("input[type='checkbox']").on("click", function(){
  checkboxesState[this.getAttribute("data-chk_index")] =  this.checked
  
  // Update Storage
  localStorage.setItem("checkedCheckboxes", JSON.stringify(checkboxesState))
  
  // That is the current state of the saved array
  console.log(localStorage.getItem("checkedCheckboxes"))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">

检查我的 CodePen，因为 SO 片段中不允许使用。localStorage

0赞 MichaelMitchell 2/19/2021 #2

JQuery 用于序列化表单以提交到服务器，除非另有说明，否则假定不会选中复选框。serialize

问题在于，在应用序列化字符串中的属性之前，https://github.com/kflorence/jquery-deserialize/ 没有清空属性。deserialize

我通过在应用反序列化之前取消选中所有复选框来解决此问题。

document.getElementById("thepage").innerHTML = stateHtml;
$("#thepage input[type='checkbox']").prop("checked", false);
$("#thepage").deserialize(stateDomSerialized);

上一个：如何在 ASP.NET Core 中表单的 data-ajax-failure 函数中捕获 Ajax 错误？

下一个：如何使用 Unobtrusive Ajax 使用 sweetalert 实现 data-ajax-confirm？

如何序列化取消选中复选框？

How do I serialize the unchecking of checkboxes?

评论