个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有 15 个左右的单独复选框，每个没有 id 或类，问题是我希望它们都在表单提交或提交时保留其单独的选中或未选中状态(使用本地存储)页面刷新
<form name="searchform" id="form1" method="get" action="/ztest.php">
<input type="checkbox" name="opt17" value="Yes"/>
<input type="checkbox" name="opt18" value="Yes"/>
<input type="checkbox" name="opt19" value="Yes"/>
etc...
</form>
我的问题是，在 Javascript 中是否可以将它们保存在本地存储中，而不必为每个复选框分配类或 id？
如果可能的话，一个工作 fiddle 将不胜感激杰森
最佳答案
假设我们的复选框是盲目的
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
现在我们需要找出哪个元素被点击，为此我们可以获得被点击元素的索引。
const clickedIndex = [...event.target.parentElement.children].indexOf(event.target);
此行将为您提供单击元素的索引，您可以将其保存在本地存储中
localStorage.setItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
您还可以在页面加载时检查本地存储中保存了哪个索引。
const inputs = document.querySelectorAll("input");
console.log(inputs);
if (localStorage.length > 0) {
for (let key in localStorage) {
if (!isNaN(localStorage[key]))
inputs[localStorage[key]].checked = true;
}
}
因此是完整的代码
<body>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
<input type = "checkbox" onclick = "clickThis(event)"/>
</body>
<script>
const inputs = document.querySelectorAll("input");
console.log(inputs);
if (localStorage.length > 0) {
for (let key in localStorage) {
if (!isNaN(localStorage[key]))
inputs[localStorage[key]].checked = true;
}
}
function clickThis(event) {
console.log(event.target);
const el = event.target;
const clickedIndex = [...el.parentElement.children].indexOf(el);
if (event.target.checked) {
// adding click value to local storage
localStorage.setItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
} else {
// deleting unchecked value from localstorage
localStorage.removeItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
}
}
</script>
#happy_coding
REPL link
https://repl.it/repls/SlateblueCorruptScale
关于javascript - 页面刷新后保存多个复选框的单独状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60539099/
25
4
0
我是一名优秀的程序员,十分优秀！