填写选择多项选择测验

Question

我似乎无法一次从阵列中添加多个选择。 我想通过相应的单选按钮将它们全部一次添加。 最好的方法是什么？ 下面是代码。

http://jsbin.com/oJoBuKA/1/edit

Answer 1

问题出在您的for循环条件检查中。 放这个

for (var i = 0; i < quizContent[0].choices.length; i++)

您需要获取quizcontent对象中的optionss数组的长度。

Answer 2

您需要枚举选择并为每个答案添加标签（ jsFiddle ）：

for (var i = 0; i < quizContent.length; i++) {
  document.getElementById("questionHeader").innerHTML = quizContent[i].question;

  for (var j = 0; j < quizContent[i].choices.length; j++) {
    var choice = quizContent[i].choices[j];
    var id = "ans" + j + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + j + 1);
    elem.setAttribute("name", "ans" + i);
    document.getElementById("choices").appendChild(elem);
    var labelElem = document.createElement("label");
    labelElem.innerHTML = quizContent[i].choices[j];
    document.getElementById("choices").insertBefore(labelElem, elem);
  }

}

Answer 3

您的代码有一些问题。 for循环条件中的第一个。 您应该尽可能多地运行它。 其次，您必须为每个选择添加标签，但是您只为第一个选择添加标签。

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    elem.setAttribute("name", "answer");
    var label = document.createElement("label");
    label.setAttribute("class", "choice");
    label.innerHTML = choice;
    var br = document.createElement('br');

    document.getElementById("choices").appendChild(label);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choices").appendChild(br);
}

Answer 4

您正在遍历错误的事物来为所有选项创建单选按钮。

当前，变量i从0循环到quizContent.length 。 这意味着它正在遍历所有问题。 创建一个以上的问题将很有效，但是创建一个以上的答案将不起作用。

为此，在遍历问题的循环中，您还必须遍历答案的选择。 当前，您有：

for (var i = 0; i < quizContent.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

而您应该循环选择答案：

for (var i = 0; i < quizContent.length; i++) {
    for (var x = 0; x < quizContent[i].choices.length; x++) {
        var choice = quizContent[i].choices[x];
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        document.getElementById("choices").appendChild(elem);
        document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

Answer 5

请在下面自我说明答案，

<div id="container">
  <h1 id="title">Your Quiz</h1>
  <h2 id="questionHeader"></h2>
  <div id="choices"></div>
</div>

for (var i = 0; i < quizContent.length; i++) {
    for (var j = 0; j < quizContent[i].choices.length; j++) { // choices is an array so iterate over it to get individual choice.
        var choice = quizContent[i].choices[j]; 
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        elem.setAttribute("name", "choice"); // set this to ensure only one radio button is selected.
        document.getElementById("choices").appendChild(elem);
        var label = document.createElement("label");
        label.innerHTML = quizContent[0].choices[j]; // set label innerHTML here 
        document.getElementById("choices").appendChild(label); // append label here
    }
}

工作提琴

Answer 6

调整循环形状以稍微添加带标签的单选按钮，它将为所有选择添加带标签的单选按钮：

//Need to loop through my choices and create radio buttons at same time.
//Having trouble creating radio buttons here.

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];

    var labelId = "lbl" + i + 1;
    var labelElem = document.createElement("label");
    labelElem.setAttribute("id", labelId);
    document.getElementById("choices").appendChild(labelElem);
    document.getElementById(labelId).innerHTML = quizContent[0].choices[i];

    var inputId = "ans" + i + 1;
    var inputElem = document.createElement("input");
    inputElem.setAttribute("type", "radio");
    inputElem.setAttribute("id", inputId);
    document.getElementById("choices").appendChild(inputElem);
    //document.getElementById(id).innerHTML = choice;

    /*radioButton = document.createElement("input");
    radioButton.type = "radio";*/

    //document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

这只是您需要走的方向的极简主义解释。

@Pilot有这个想法。