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

首页

web前端

js教程

使用 JavaScript 在另一个页面上显示选定的复选框？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 am 11:09 AM

使用 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 id="Print-checked-button-values">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 id="Page">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 id="Page">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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。