如何在 Javascript 中添加单选按钮组？答案

【问题标题】：How to add radio button group in Javascript?如何在 Javascript 中添加单选按钮组？
【发布时间】：2015-09-19 04:42:24
【问题描述】：

var text = "";
for (var x = 0; x < questions.length; x++)
{
    text += (x+1) + ". " + questions[x] + "<br>";
}
document.getElementById("q").innerHTML = text;

我有一个问题数组（大小=5）和每个问题的 5 个答案数组。

var ans1 = ["answer","answer","answer","answer"];
var ans2 = ["answer","answer","answer","answer"];
var ans3 = ["answer","answer","answer","answer"];
var ans4 = ["answer","answer","answer","answer"];
var ans5 = ["answer","answer","answer","answer"];
var questions = ["q1", "q2", "q3", "q4", "q5"];

使用我的代码，我只显示 5 个问题。我不知道如何为每个问题插入一个单选按钮组的答案。帮忙？

（我已经在 java 上做过，但我无法将其转换为 javascript。我是新手 :| ）提前致谢

【问题讨论】：

In HTML, with Javascript, create new radio button and its text? 的可能重复项

标签： javascript

【解决方案1】：

我们可以将答案保存在二维数组中。这样我们就可以避免使用 eval 方法。第一个循环是关于问题的，第二个循环是关于答案的。您可以尝试以下方法：

var ans1 = ["answer","answer","answer","answer"];
var ans2 = ["answer","answer","answer","answer"];
var ans3 = ["answer","answer","answer","answer"];
var ans4 = ["answer","answer","answer","answer"];
var ans5 = ["answer","answer","answer","answer"];
var questions = ["q1", "q2", "q3", "q4", "q5"];

for (var x = 0; x < questions.length; x++)
{
    var number = x + 1;
    newp = document.createElement("p");
    newp.appendChild(document.createTextNode((number) + ". " + questions[x]));
    newp.appendChild(document.createElement('br'));
    var thisAnswers = eval('ans' + number);
    for(i in thisAnswers){
      var ans = thisAnswers[i];
      var label = document.createElement("label");
      var radio = document.createElement("input");
      radio.type  = "radio";
      radio.name  = 'answer' + number;
      radio.value = ans;
      label.appendChild(radio);
      label.appendChild(document.createTextNode(ans));
      newp.appendChild(label);
    }
    document.getElementById("q").appendChild(newp);
}

【讨论】：

谢谢！（它变成了一个复选框，但我解决了它）另一个问题，如何检查选中的单选按钮？
抱歉，更新了。现在是收音机盒子。 radio.name = '答案' + i;需要是 radio.name = 'answer' + number;
您的另一个问题不清楚。是否要使用 Javascript 获取选定的单选值？
对不起。是的，这样我就可以检查答案是否正确。
document.querySelector('input[name = "answer5"]:checked').value 这将为您提供选定的单选值。

【解决方案2】：

您可以通过 DOM 创建一个“输入”元素来创建单选选项

var input = document.createElement("input");

可以通过设置type属性来进行单选类型输入

input.type = "radio";

您还可以设置输入的值

input.value = ans1[0];

这里有一个小提琴来仔细看看：https://jsfiddle.net/0gw1ar21/2/

【讨论】：