在本文中，您將了解如何使用 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 在另一個頁面上顯示選定的復選框？的詳細內容，更多請關注www.92cms.cn其它相關文章！
