javascript - 将单选按钮输入添加到文本框输入并将其存储在列表中？

Question

我有一个文本框，用户可以在其中输入他们的姓名和 2 个单选按钮，一个用于 Mr.，一个用于 Mrs.。

当用户点击提交按钮时，我希望运行一个函数来检查用户选中了哪个单选按钮并将其添加到他们的姓名中，然后将其存储在列表中。

例如，假设他们输入的名字是 John，然后单击 Mr. 框。我希望它将 Mr. 添加到 john，然后将其存储在列表中。所以它将存储 Mr.John 是一个列表。

我不知道该怎么做，这是我目前所知道的:

var UserNames = []

var NameAdd = function() {
    var name = document.getElementById("nametextbox").value;
    UserNames.push("name");
}

如果该代码正确，它应该从文本框中获取输入并将其存储在列表中。

这是单选按钮的 css:

#CheckBox1,#CheckBox2 { 
    float:left;
     margin: 600px 20px 20px 60px; 
     color: #b2aba4;

} 

这是 html:

<div id="CheckBox1"><input type="radio" Name="Mr."/>Mr.</div>
<div id="CheckBox2"><input type="radio" Name="Mrs."/>Mrs.</div>

我在这里不知所措，非常感谢您的帮助。我知道它应该是一个 if/else 语句，但过去我一无所知。

Answer 1

我会将您的标记更改为:

<div id="CheckBox1"><input type="radio" name="salutation" value="Mr." />Mr.</div>
<div id="CheckBox2"><input type="radio" name="salutation" value="Mrs." />Mrs.</div>

然后您可以使用此 JavaScript 获取值:

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