如何在事件触发后在local-storage中设置复选框状态
如何在事件触发后在local-storage中设置复选框状态
提问于 2019-01-06 06:15:44
我有一个默认选中的复选框输入，用于切换页面上元素的可见性。我希望用户在刷新页面时保存选项。
var c = document.createElement('input')
c.setAttribute("type", "checkbox")
c.checked = true
c.onclick = function(){
if(c.checked) element.style.display = 'block'
if(c.checked == false) element.style.display = 'none'
}
/* This code below saves the state of the checkbox,
but never fires the event or updates the element */
c.checked = (localStorage.getItem('cchecked')== 'true');
c.onchange = function(){
localStorage.setItem('cchecked', c.checked)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-06 06:28:43
嗯，一个更完整的例子是可行的..
<!DOCTYPE html>
<html>
<body>
<hr id="line" />
<script>
var element = document.getElementById('line')
var c = document.createElement('input')
c.setAttribute("type", "checkbox")
c.checked = true
c.onclick = function(){
if(c.checked) element.style.display = 'block'
if(c.checked == false) element.style.display = 'none'
}
/* This code below saves the state of the checkbox,
but never fires the event or updates the element */
// c.checked = (localStorage.getItem('cchecked')== 'true');
if (localStorage.getItem('cchecked')== 'true') {
c.checked = true;
}
else if (localStorage.getItem('cchecked')== 'false') {
c.checked = false;
}
c.onchange = function(){
localStorage.setItem('cchecked', ( c.checked ? 'true' : 'false'))
}
if ( !c.checked) element.style.display = 'none'
document.body.appendChild(c);
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54056781
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号