在本文中，您将了解如何使用 JavaScript 获取其他页面上的所有复选框。复选框是一种选择类型，是一种真或假的二元选择类型。它是页面上呈现的 GUI 形式的一个选项，使用它我们可以从用户那里获取更多输入。如果选中某个框，则表示 true，这意味着用户已选择该值；如果未选中该框，则表示用户尚未选择该值。
复选框和单选按钮之间的区别在于，使用单选按钮时，用户只能选择一个值，而使用复选框时，用户将可以选择多个值。
复选框示例
Example of checkbox
从上面的输出中，您可以观察到该框被选中，这表明用户已选择该值。
JSON.parse() 方法始终采用字符串格式的参数（即我们必须用单个引号将值括起来）。
立即学习“Java免费学习笔记（深入）”；
示例
让我们看一个程序示例：
Print checked button values.
Select your favourite fruits:
Apple
Mango
Banana
Orange
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); }
从输出中，您可以观察到我们正在打印由同一页面上的警报消息指定的选定复选框。在此之前我们先来了解一下本地存储的概念。
在 JavaScript 中使用本地存储
LocalSorage 是网络浏览器中的一种数据存储类型。使用此网站可以存储数据，并且数据将始终保留在存储中，并且不会在您关闭浏览器时消失。
另一个选项是 cookie，它也用于存储站点数据。此存储限制约为。浏览器中为 2Mb，而 localStorage 附带 5Mb 存储空间，这在 cookie 存储大小方面更大
为了有效、安全地使用 localStorage，用户应记住的一些术语。
在存储敏感数据（例如密码和用户不应公开共享的其他信息）方面并不安全。
数据存储在浏览器本身而不是服务器上吗？而且它的操作是同步的，即顺序地处理一个又一个的操作。
与 Cookie 存储大小相比，它具有更大的存储数据容量。
几乎所有现代浏览器都支持它，并与最新版本兼容。
芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。
34 查看详情
检查 LocalStorage 浏览器兼容性
要检查您的浏览器是否支持 localStorage，请在浏览器控制台中执行以下代码，如果未定义，则表示您的浏览器支持 localStorage。
示例
if (typeof(Storage) !== "undefined") { document.write("Your browser support localStorage.") } else { document.write("Your browser doesn't support localStorage.") }
使用的 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 函数将是
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; }
这里，在 items 变量中获取所有复选框项目，在 arr 数组中，我们将添加所有已标记为 true 的项目，表示用户已选中。并将数组添加到本地存储。
从第二页的存储中检索值的 JavaScript 函数
var arr=localStorage.getItem("ddvalue"); var selectedItems = ""; for (var i = 0; i < arr.length; i++) { selectedItems += arr[i] + ", "; } document.getElementById("result").innerHTML= selectedItems;
这里的数组 arr 将从存储中检索到的值与键值一起存储。我们将采用一个名为所选项目的空字符串变量，然后附加所有数组项目。最后，我们将在 id 结果的位置打印它。
page1.html
Page1
Select your favourite fruits:
Apple
Mango
Banana
Orange
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.
To see the result, please run the Page2.html") return true; }
page2.html
Print checked button values on another page- JavaScript. Page2
The Selected course is: var arr=localStorage.getItem("ddvalue"); arr=arr.split(","); var selectedItems = ""; for (var i = 0; i < arr.length; i++) { selectedItems += "
" + arr[i] ; } document.getElementById("result").innerHTML= selectedItems;
从输出中，您可以观察到在第一页 page1.html 上显示了所有项目，当用户从选中的列表中选择项目时，它会将所有选定的值添加到存储中，键名称为价值。当用户按下提交按钮时，它会将他重定向到下一页，即 page2.html。在第 2 页上，程序将使用键值从存储中取出用户选择的值，并通过循环遍历数组，附加并打印最终值。
以上就是使用 JavaScript 在另一个页面上显示选定的复选框？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/529737.html
微信扫一扫 
支付宝扫一扫 
