Javascript 在HTML中的变量中存储复选框中的多个选择并显示它们_Javascript_Html_Css

Javascript 在HTML中的变量中存储复选框中的多个选择并显示它们

javascript html css

Javascript 在HTML中的变量中存储复选框中的多个选择并显示它们,javascript,html,css,Javascript,Html,Css,所以，我对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">Def

所以，我对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>


NBA位置选择
NBA选秀预测






window.onload=alert（localStorage.getItem（“变量”）；
函数随机（）
{
var a=document.getElementById（“属性”）.value；
document.getElementById（“输出”）.innerHTML=a；
}


选择所需的技能
三分记分员

防守者

轮辋保护装置

攻击者





您选择了以下技能：

首先，多个元素不应该有相同的ID。确保每个元素的“技能”都不同。还向每个复选框添加值属性。你可以这样试试

var arr=[]；
函数myFunction（）{
控制台清除（）
var chkBoxes=document.getElementsByClassName（“anyclass”）；//获取所有复选框数组
对于（变量i=0；iconsole.log（item））；
}


ddd
试试看

你想要的是某种存储，你有一些选择，你可以做研究，选择最适合你的：，或者一个数据库（这一个更高级，需要一些后端语言，不仅仅是简单的JS）@CalvinNunes为什么不只是提交表单，并将数据作为查询字符串参数传递？啊，是的，当然忘了这个可能性,，Thanks@user1538301它不是已经是表单提交了吗？@Benjamin现在你有一个没有“提交”按钮的类型，没有通过DOM提交的JS。使用本机HTML5语义无法“提交”此表单。表单提交会将您从一个URL带到另一个URL（通常），在页面导航期间，提交可以将数据发送到下一个页面；如果使用GET，它会将数据作为查询参数发送（即，在您的情况下，它会重定向到URL，如：

/same webpage.html？Defender=true&3+Point+Scorer=true

；然后使用JS在

same webpage.html

中获取查询参数，就这样了。