如何解决如何序列化取消选中复选框?
我正在尝试使用 unobtrusive-ajax 来允许站点在 JavaScript 可用时将其内容更新为 AJAX,否则将其更新为静态页面。我想支持浏览器的 Back
按钮在历史记录中向后移动。
当用户浏览网站时,我使用 JavaScript 的历史 API 来操纵浏览器历史记录。我将 HTML(通过 innerHTML
)和 DOM 的当前状态(通过 JQuery 的 serialize
方法)存储在历史对象中。当用户点击 Back
时,HTML 和 DOM 分别从缓存的 HTML 和序列化的 DOM 中恢复。
但是,我丢失了有关在页面加载 ("checked"="checked"
) 时选中但用户未选中的复选框的信息。
根据 https://api.jquery.com/serialize/ 处的 JQuery 文档
来自复选框和单选按钮(“radio”或“checkBox”类型的输入)的值仅在被选中时才包含在内。
此处的“值”指的是选中状态,而不是复选框的 value
。
这是设计错误吗? 当它不同于 HTML 时,它不应该包含选中的值吗?
其他元素是否有条件序列化的其他属性?
解决方法
无论您尝试什么浏览器历史操作历史...这里的主要内容是实时保存复选框状态,以便每次 JS 运行时,您都可以检索保存的值。
可以通过 localStorage 保存复选框的状态。
下面的内容在页面重新加载时完美运行。您的历史操作应该绕过后退按钮的“正常”行为,而不是再次运行 JS。我把它留给你。 ;)
// 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
。
JQuery 的 serialize
用于序列化表单以提交给服务器,除非另有说明,否则假定复选框未被选中。
问题在于 https://github.com/kflorence/jquery-deserialize/ 中的 deserialize
在应用序列化字符串中的属性之前没有清空这些属性。
我通过在应用反序列化之前取消选中所有复选框来解决这个问题。
document.getElementById("thepage").innerHTML = stateHtml;
$("#thepage input[type='checkbox']").prop("checked",false);
$("#thepage").deserialize(stateDomSerialized);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。