使用 JavaScript 在另一个页面上显示选定的复选框？-js教程-PHP中文网

使用 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中文网其他相关文章！