我正在尝试创建一个带有多个复选框的用户首选项页面,让用户决定他们希望如何接收其通知。 这是我当前的偏好设置HTML表单: 我刚刚添加了4个复选框,我需要帮助将它们保存到数据库中,在这里我使用布尔值确定是否选中了它们。 当选择“保存首选项”按钮时,我的Perl脚本在HTML页面上运 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
尝试存档(要做)的操作:将复选框选择保存在localStorage >>中,这样用户就不必一次又一次地选中所有复选框。
问题:我能够将选择保存在localStorage中,但是复选框未显示onload,该机制似乎也被颠倒了,而选中的复选框被捕获而未选中等
我想念什么吗?
这是我的代码
// issue: if localStorage saves the checkbox, the input field will not display $('input[type="checkbox"]').click(function () { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); function save() { var checkbox = document.getElementById('activityTitleCb'); localStorage.setItem('activityTitleCb', checkbox.checked); } function load() { var checked = JSON.parse(localStorage.getItem('activityTitleCb')); document.getElementById("activityTitleCb").checked = checked; } function wis() { location.reload(); localStorage.clear() } load();
.searchFilterBox{ display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chiller_cb"> <input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb"> <label for="activityTitleCb"> add my name!</label> </div> <br> <div class="col-sm-2 activityTitleCb searchFilterBox"> <input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text"> </div> <br> <input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/> <input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>
在函数加载中,尝试console.log(选中)以确保该值为布尔值。 您也可以尝试打开浏览器控制台以查看本地存储中存储了什么值。
这是一个解决方案。 您不需要按“保存”按钮,因为它会自动将其保存到localStorage。
https://codepen.io/anon/pen/PyKJQq
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// issue: if localStorage saves the checkbox, the input field will not display
$(() =>{
$('input[type="checkbox"]').change(function() {
if (this.checked) {
localStorage.setItem('activityTitleCb', true);
} else {
localStorage.setItem('activityTitleCb', false);
}
});
function save() {
var checkbox = document.getElementById('activityTitleCb');
localStorage.setItem('activityTitleCb', checkbox.checked);
}
function load() {
var checked = localStorage.getItem('activityTitleCb') === undefined ? false : localStorage.getItem('activityTitleCb');
checked = (checked === 'true');
document.getElementById("activityTitleCb").checked = checked;
}
function wis() {
location.reload();
localStorage.clear()
}
load();
})
</script>
<style>
.searchFilterBox{
display: none;
}</style>
<div class="chiller_cb">
<input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb">
<label for="activityTitleCb"> add my name!</label>
</div>
<br>
<div class="col-sm-2 activityTitleCb searchFilterBox">
<input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text">
</div>
<br>
<input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/>
<input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.