单选按钮选择值；选择 3 个选项答案

【问题标题】：Radio Button selected value; choice of 3 options单选按钮选择值；选择 3 个选项
【发布时间】：2019-11-20 06:12:13
【问题描述】：

仅使用 HTML 和 JavaScript，我试图获取名字、姓氏详细信息，然后从三个单选按钮中选择最喜欢的颜色。我可以让名字和姓氏工作，但不能做单选按钮？

HTML 文件：

<html>

<title>Task 3</title>

<head>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>

    <form name="formDetails">
        First Name:<input type="text" id="firstName"><br>
        Last Name:<input type="text" id="lastName"><br>
        <p>Favourite Colour:</p>
        <input type="radio" name="colour" value="Red">Red<br>
        <input type="radio" name="colour" value="Blue">Blue<br>
        <input type="radio" name="colour" value="Green">Green<br>
        <input type="button" onclick="display()" value="Submit">
    </form>

</body>

JavaScript 文件：

function display(){
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;

alert(firstName + " " + lastName);
}

我不知道如何实现单选按钮？我见过一些人使用 jQuery，但我想在这里只使用 JavaScript，因为我还很新。

谢谢。

【问题讨论】：

标签： javascript html radio-button alert getelementbyid

【解决方案1】：

Js：

var colour=document.querySelector('input[name="colour"]:checked').value;
alert(colour);

【讨论】：

通常最好解释一下代码如何帮助 OP，以便以后的读者能够理解。

【解决方案2】：

步骤：

为所有输入标签添加一个名为check_in 的类。

使用 javascript 查找该类的所有标签

遍历每个标签以确定检查它们中的哪一个。如果选中标记，请将其添加到名为 results 的变量中。

最终从输入框中获取名字和姓氏，并将这些值添加到名为results 的变量中

function display() {
  results = {}
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;
  var all_input = document.getElementsByClassName('check_in');
  for (var i = 0; i < all_input.length; ++i) {
    if (all_input[i].checked == true) {
      results['option'] = all_input[i].value;
    }
  }
  results['firstname'] = firstName;
  results['lastname'] = lastName;
  console.log(results);
  alert('firstname:' + results['firstname'] + ' lastname: ' + results['lastname'] + ' option: ' + results['option']);
}

margin:50px auto auto;

<html>

<title>Task 3</title>

<head>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>

  <form name="formDetails">
    First Name:
    <input type="text" id="firstName">
    <br>Last Name:
    <input type="text" id="lastName">
    <br>
    <p>Favourite Colour:</p>
    <input type="radio" name="colour" value="Red" class="check_in">Red
    <br>
    <input type="radio" name="colour" value="Blue" class="check_in">Blue
    <br>
    <input type="radio" name="colour" value="Green" class="check_in">Green
    <br>
    <input type="button" onclick="display()" value="Submit">
  </form>

</body>

【讨论】：

通常最好解释一下代码如何帮助 OP，以便以后的读者能够理解。
@MikeMcCaughan true..我添加了一些信息..Tnks