 

当前位置：云主机测评网  技术教程  正文

HTML 复选框刷新后保持选中状态

2024年12月17日分类：技术教程阅读(6) 评论(0)

HTML 复选框在刷新页面后保持选中状态，可以通过 JavaScript 来实现，以下是一个简单的示例：

（图片来源网络，侵删）

1、创建一个 HTML 文件，添加一个复选框和一个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>复选框保持选中状态</title>
</head>
<body>
    <input type="checkbox" id="myCheckbox"> 保持选中状态
    <button onclick="refreshPage()">刷新页面</button>
    <script src="main.js"></script>
</body>
</html>

2、接下来，创建一个名为 main.js 的 JavaScript 文件，用于处理复选框的选中状态：

// 获取复选框元素
const checkbox = document.getElementById('myCheckbox');
// 检查本地存储中是否有复选框的状态
if (localStorage.getItem('checkboxState') === 'true') {
    // 如果存在，则设置复选框为选中状态
    checkbox.checked = true;
}
// 当点击刷新按钮时，保存复选框的状态到本地存储，并刷新页面
function refreshPage() {
    localStorage.setItem('checkboxState', checkbox.checked);
    location.reload();
}

在这个示例中，我们使用了一个名为 checkboxState 的本地存储项来保存复选框的状态，当页面加载时，我们检查这个存储项是否存在，如果存在，则将复选框设置为选中状态，当用户点击刷新按钮时，我们将复选框的状态保存到本地存储，并刷新页面，这样，即使在刷新页面后，复选框仍然会保持选中状态。

版权声明：主机测评不销售、不代购、不提供任何支持，仅分享信息/测评（有时效性），自行辨别，请遵纪守法文明上网。
文章名称：《HTML 复选框刷新后保持选中状态》
文章链接：https://www.yunzhuji.net/jishujiaocheng/45444.html

相关推荐

评论

暂无评论

