拨动开关保留上次状态，即使在重新加载时也是如此
我使用的是W3schools (this one)的切换开关。在W3schools编辑器中，它会返回到重新加载时已建立的“选中”或“未选中”位置，但无论出于何种原因-如果我“选中”我的，然后重新加载，它保持选中状态，或者如果我取消选中它，然后重新加载，它保持未选中状态。
对于我正在做的项目来说，在初始加载/任何重新加载/重新访问时都不检查它是很重要的。
我很好奇这是否是某种缓存问题，因为我正在我的电脑上本地处理它（wordpad用于编辑html，firefox用于查看文件），但我将我的工作上传到neocities，问题仍然存在，所以我假设这意味着它是代码本身。
<head>
<style>
.selector {
background-color:rgba(255, 255, 0, 0.3);
text-align:center;
border:1px solid gold;
width: 50vw;
max-width:500px;
border-radius:2em;
padding:1em;
font-size:20px;
color:gold;
margin:2em auto auto;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: darkblue;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: gold;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: cornflowerblue;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<div class="selector">Unchecked
<label class="switch">
<input type="checkbox" onclick="hoverFunction()">
<span class="slider" alt="toggle switch button"></span>
</label>
Checked</div>
</body>我该怎么解决这个问题？
1条答案
按热度按时间xa9qqrwz1#
这是Firefox造成的。如果添加autocomplete=“off”标志，它应该可以防止这种行为，您可以使用“checked”或“unchecked”标志来设置默认状态。
例如：
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" unchecked>或者：
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" checked>