使用 JavaScript 在另一个页面上显示选定的复选框？
在本文中，您将了解如何使用 JavaScript 获取其他页面上的所有复选框。复选框是一种选择类型，是一种真或假的二元选择类型。它是页面上呈现的 GUI 形式的一个选项，使用它我们可以从用户那里获取更多输入。如果选中某个框，则表示 true，这意味着用户已选择该值；如果未选中该框，则表示用户尚未选择该值。
复选框和单选按钮之间的区别在于，使用单选按钮时，用户只能选择一个值，而使用复选框时，用户将可以选择多个值。
复选框示例
<html>
<body>
<input type="checkbox" value="false" onchange="alert('checked')"/>Example of checkbox <br/>
</body>
</html>
从上面的输出中，您可以观察到该框被选中，这表明用户已选择该值。
JSON.parse() 方法始终采用字符串格式的参数（即我们必须用单个引号将值括起来）。
示例
让我们看一个程序示例：
<html>
<body>
<form>
<h1>Print checked button values.</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p>
<input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/>
</p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
selectedItems+=items[i].value+"";
}
}
alert(selectedItems);
}
</script>
</body>
</html>
从输出中，您可以观察到我们正在打印由同一页面上的警报消息指定的选定复选框。在此之前我们先来了解一下本地存储的概念。
在 JavaScript 中使用本地存储
LocalSorage 是网络浏览器中的一种数据存储类型。使用此网站可以存储数据，并且数据将始终保留在存储中，并且不会在您关闭浏览器时消失。
另一个选项是 cookie，它也用于存储站点数据。此存储限制约为。浏览器中为 2Mb，而 localStorage 附带 5Mb 存储空间，这在 cookie 存储大小方面更大
为了有效、安全地使用 localStorage，用户应记住的一些术语。
在存储敏感数据（例如密码和用户不应公开共享的其他信息）方面并不安全。
数据存储在浏览器本身而不是服务器上吗？而且它的操作是同步的，即顺序地处理一个又一个的操作。
与 Cookie 存储大小相比，它具有更大的存储数据容量。
几乎所有现代浏览器都支持它，并与最新版本兼容。
检查 LocalStorage 浏览器兼容性
要检查您的浏览器是否支持 localStorage，请在浏览器控制台中执行以下代码，如果未定义，则表示您的浏览器支持 localStorage。
示例
<html>
<body>
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
document.write("Your browser support localStorage.")
}
else {
document.write("Your browser doesn't support localStorage.")
}
</script>
</body>
</html>
使用的 localStorage 方法
1。 setItem()
该方法用于将数据添加到存储中。我们将键和值传递给此方法来添加数据。
localStorage.setItem("name", "Kalyan");
2。获取项目（）
此方法用于获取或检索存储中存在的数据。我们将键传递到此方法中以获取与该键相关的值。
localStorage.getItem("name");
3。删除项目（）
此方法用于删除存储中存在的特定数据。我们将键传递给此方法，它会删除存储中作为数据存在的键值对。
localStorage.removeItem("name");
4。清除（）
该方法用于清除存储中存在的本地存储数据。
localStorage.clear();
提示：要检查 localStorage 的大小，您可以在浏览器控制台中执行以下语法
console.log(localStorage.length);
让我们将该值发送到另一个页面。我们将首先使用 setItem() 将所有选定的选中值添加到本地存储中，然后在下一页上，我们将使用 getItem() 方法取出值。
我们为本地存储增值的 JavaScript 函数将是
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
return true;
}
</script>
这里，在 items 变量中获取所有复选框项目，在 arr 数组中，我们将添加所有已标记为 true 的项目，表示用户已选中。并将数组添加到本地存储。
从第二页的存储中检索值的 JavaScript 函数
<script>
var arr=localStorage.getItem("ddvalue");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += arr[i] + ", ";
}
document.getElementById("result").innerHTML= selectedItems;
</script>
这里的数组 arr 将从存储中检索到的值与键值一起存储。我们将采用一个名为所选项目的空字符串变量，然后附加所有数组项目。最后，我们将在 id 结果的位置打印它。
page1.html
<html>
<body>
<form action="page2.html">
<h1>Page1</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p><input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/></p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
document.write("Submitted Successfully. <br> To see the result, please run the Page2.html")
return true;
}
</script>
</body>
</html>
page2.html
<html>
<head>
<title>Print checked button values on another page- JavaScript.</title>
</head>
<body>
<h1>Page2</h1>
<hr/>
The Selected course is: <b><span id="result"></span></b>
<script>
var arr=localStorage.getItem("ddvalue");
arr=arr.split(",");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += "<br>" + arr[i] ;
}
document.getElementById("result").innerHTML= selectedItems;
</script>
</body>
</html>
从输出中，您可以观察到在第一页 page1.html 上显示了所有项目，当用户从选中的列表中选择项目时，它会将所有选定的值添加到存储中，键名称为价值。当用户按下提交按钮时，它会将他重定向到下一页，即 page2.html。在第 2 页上，程序将使用键值从存储中取出用户选择的值，并通过循环遍历数组，附加并打印最终值。
以上是使用 JavaScript 在另一个页面上显示选定的复选框？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
