所以，我对 HTML 和 Javascript 还很陌生。作为作业的一部分，我必须制作多个网页。 我的一个网页包含复选框，用户可以从中选择多个选项。
<form method="get">
<input type="checkbox" name="3 Point Scorer" id="skill">3 Point Scorer<br>
<input type="checkbox" name="Defender" id="skill">Defender<br>
<input type="checkbox" name="Rim Protector" id="skill">Rim Protector<br>
<input type="checkbox" name="Attacker" id="skill">Attacker<br>
</form>
现在，如果用户选择前两个选项，是否可以将这两个选项存储在我可以在下一页上使用的变量中？另外，我想显示当前页面中选择的两个选项。
供引用，相关页面的代码如下:
<html>
<head>
<title>NBA Position Selection</title>
</head>
<!--<style>
body {
background-image: url('Img3.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
-->
<body style="background-color:powderblue;">
<h1>NBA Draft Prediction</h1>
<br>
<a href="default.asp">
<img src="https://images.fineartamerica.com/images-medium-large-5/5-anatomy-of-a-basketball-player-sebastian-kaulitzkiscience-photo-library.jpg" alt="Daruis Garland" style="float:centre;width:300px;height:300px;" align="middle">
</a>
<br>
<br>
<script>
window.onload = alert(localStorage.getItem("Variables"));
</script>
<script>
function random()
{
var a=document.getElementById("Attribute").value;
document.getElementById("output").innerHTML=a;
}
</script>
<br>
<h2> Choose the required Skills</h2>
<form method="get">
<input type="checkbox" name="3 Point Scorer" id="skill">3 Point Scorer<br>
<input type="checkbox" name="Defender" id="skill">Defender<br>
<input type="checkbox" name="Rim Protector" id="skill">Rim Protector<br>
<input type="checkbox" name="Attacker" id="skill">Attacker<br>
</form>
<br>
<br>
You have Chosen the skills of: <!..I want to display the chosen elements here..>
<div id="output"></div>
<br><br>
<a href="NBA_3rd_Page.html" class="btn btn-info" role="button">Click Here For Prediction</a>
</body>
</html>
最佳答案
首先，多个元素不应该有相同的ID。确保每个元素的“技能”都不同。还要为每个复选框添加一个值属性。 你可以这样试试
var arr = [];
function myFunction() {
console.clear()
var chkBoxes = document.getElementsByClassName("anyclass"); // get all check box array
for (var i = 0; i < chkBoxes.length; i++) {
if (chkBoxes[i].checked) { // check if checked
arr.push(chkBoxes[i].value);
}
}
arr.forEach(item => console.log(item));
}<input type="checkbox" value="val1" class="anyclass" />
<input type="checkbox" value="val2" class="anyclass" />
<input type="checkbox" value="val3" class="anyclass" />
<input type="checkbox" value="val4" class="anyclass" />
<p id="demo">ddd</p>
<button onclick="myFunction()">Try it</button>现在您可以将此数组存储在本地存储中，并在需要时在其他页面中使用它。
关于javascript - 将复选框中的多个选择存储在 HTML 变量中并显示它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59671208/