資料結構
網路
關係資料庫管理系統
作業系統
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+ 次瀏覽
