时间戳

首页 > 解决方案 > 如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项？

javascript - 如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项？

问题描述

我将在下周使用 HTML、CSS 和 JavaScript 制作一个小型文本冒险游戏，但是我从一开始就遇到了问题，因为我试图让玩家有选择的选择使用单选按钮，所以他们选择一个选项，然后点击提交，根据选择，可能会发生很多事情。但是我不知道如何实际实现这个功能......

我已经查看了与我的问题类似的教程或示例，但是它们都没有太大帮助。

  <form>
    <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
    <button type="button" onclick=choiceA()> Choose </button>
  </form>

我希望能够让用户检查这些选项之一，然后能够点击“选择”按钮并继续他们的方式，将他们的选择记录在 JavaScript 中以供以后参考。

如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项？

标签： javascripthtml

解决方案

您可以使用FormData. 首先给表单一个标识。在这个例子中，它是用name属性完成的。你也可以使用id

其次使用get方法获取所选表单的值

function choiceA(e) {
  e.preventDefault();
  var form = document.forms.namedItem("fileinfo");
  var formData = new FormData(form);
  console.log(formData.get('choice'))
  }
<form name='fileinfo'>
  <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
  <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
  <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
  <button type="submit" onclick=choiceA(event)> Choose </button>
</form>

推荐阅读