使用 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刪除

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使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。