为数组中的每个项目创建唯一的单选按钮答案

【问题标题】：Creating unique radio buttons for each item in an array为数组中的每个项目创建唯一的单选按钮
【发布时间】：2017-04-10 13:49:46
【问题描述】：

我正在尝试制作问卷。对于每个问题（数组的项目），我有一个数组和 5 个响应。我希望当用户回答数组中的所有问题时能够选择他们喜欢的任何响应而不会重叠。这是我目前拥有的：

var sample_q = ["question1" , "question2" , "question3" , "question4", "question5", "question6" , "question7"]
var div = document.getElementById('questions');
for (var i in sample_q) {
    div.innerHTML = div.innerHTML + sample_q[i];
    $('<br><input type="radio" name="opt1" value="positive" id="1">Yes</input>').appendTo('#questions');
    $('<br><input type="radio" name="opt2" value="negative" id="2">No</input>').appendTo('#questions');
    $('<br><input type="radio" name="opt3" value="not_applicable" id="3">NA</input>').appendTo('#questions');
    $('<br><input type="radio" name="opt4" value="something" id="4">Something</input>').appendTo('#questions');
    $('<br><input type="radio" name="opt5" value="nothing" id="5">Nothing</input><br>').appendTo('#questions');
}

这样做的问题是我可以为每个问题选择多个单选按钮。此外，有 7 个问题，以及我为每个问题选择不同答案的场景，因为我有 5 个单选按钮，它们重叠，因为问题的数量是 7，每个问题我只有 5 个选项。此外，所有问题都应该被视为一个整体，并一起回答。

【问题讨论】：

如果你想对你的单选按钮进行分组，这样用户只能在多个选项中选择一个答案，你必须为所有分组按钮设置相同的name属性值。 <input type="radio" name="question1" value="positive" id="1">，<input type="radio" name="question1" value="negative" id="2">。见：w3schools.com/html/html_forms.asp
是的，但问题是当我遍历问题列表时，用户一次只能回答 1 个问题，效率不高
那么，当用户点击第一个问题中的单选按钮时，您想为所有其他问题选择相同的答案吗？
我希望每个问题都只有一个响应。这将是用户回答的每个问题的唯一响应。将 i 设置为 name 属性解决了我的问题，因为它每次我已经将其设置为单选按钮时都会迭代并增加。不过谢谢！（我是stackoverflow的新手，如果问题不清楚或被某些人误解，我很抱歉）

标签： javascript jquery arrays radio-button

【解决方案1】：

如果你想对你的单选按钮进行分组，这样用户只能在多个选项中选择一个答案，你必须为所有分组按钮设置相同的名称属性值：

var sample_q = ["question1" , "question2" , "question3" , "question4", "question5", "question6" , "question7"]
var div = document.getElementById('questions');
for (var i in sample_q) {
    div.innerHTML = div.innerHTML + sample_q[i];
    $('<br><input type="radio" name="' + i + '" value="positive" id="1">Yes</input>').appendTo('#questions');
    $('<br><input type="radio" name="' + i + '" value="negative" id="2">No</input>').appendTo('#questions');
    $('<br><input type="radio" name="' + i + '" value="not_applicable" id="3">NA</input>').appendTo('#questions');
    $('<br><input type="radio" name="' + i + '" value="something" id="4">Something</input>').appendTo('#questions');
    $('<br><input type="radio" name="' + i + '" value="nothing" id="5">Nothing</input><br>').appendTo('#questions');
}

见JsFiddle

【讨论】：

是的，将 'i' 设置为唯一标识符会很好，因为我遍历所有问题，并且在创建单选按钮并设置名称后，'i' 会更新一次。换句话说，这将作为每个问题的 5 个单选按钮与问题 2 的名称相同但名称不同。我明白了，谢谢！
很高兴能帮上忙！

【解决方案2】：

您需要为您的单选按钮指定相同的名称，这会将它们分组，以便在任何时候都只能选择一个。祝您问卷调查顺利。

【讨论】：