时间戳

首页 > 解决方案 > 如何序列化取消选中复选框？

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

问题描述

如果 JavaScript 可用，我正在尝试使用 unobtrusive-ajax 来允许站点将其内容更新为 AJAX，如果不可用，则更新为静态页面。我想支持浏览器的Back按钮在历史上向后移动。

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

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

根据https://api.jquery.com/serialize/上的 JQuery 文档

来自复选框和单选按钮（“单选”或“复选框”类型的输入）的值仅在它们被选中时才被包括在内。

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

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

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

标签： htmljquerydomunobtrusive-ajax

解决方案

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

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

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

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

推荐阅读