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