数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 JavaScript 在另一个页面上显示选中的复选框？
在本文中，您将学习如何使用 JavaScript 获取另一个页面上的所有选中复选框。复选框是一种选择类型，它是一种二进制选择，要么为真要么为假。它是页面上存在的 GUI 表单选项，使用它我们可以从用户那里获取更多输入。如果选中一个框，则表示为真，这意味着用户已选择该值，如果未选中该框，则表示用户未选择该值。
复选框和单选按钮之间的区别在于，使用单选按钮用户只能选择一个值，而使用复选框用户可以选择多个值。
复选框示例
<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 是一种 Web 浏览器中的数据存储类型。使用此站点可以存储数据，并且它将始终保留在存储中，并且在您关闭浏览器时不会消失。
另一种选择是 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. getItem()
此方法用于获取或检索存储中存在的数据。我们将键传递给此方法以获取与该键相关的值。
localStorage.getItem("name");
3. removeItem()
此方法用于删除存储中存在的特定数据。我们将键传递给此方法，它将删除存储中作为数据存在的键值对。
localStorage.removeItem("name");
4. clear()
此方法用于清除存储中存在的本地存储数据。
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 中将存储从存储中检索到的值以及键值。我们将获取一个名为 selected items 的空字符串变量，并将附加所有数组项。最后，我们将在 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 上显示了所有项目，当用户从选中列表中选择项目时，它会将所有选中的值添加到存储中，键名为 value。当用户按下提交按钮时，它会将其重定向到下一页，即 page2.html。在第 2 页上，程序将从存储中使用键值取出用户选择的值，并通过循环遍历数组，它将附加并打印最终值。
4K+ 次浏览
