为阵列中的每个项目创建唯一的单选按钮

时间:2017-04-10 13:49:46

标签: javascript jquery arrays radio-button

我正在尝试进行问卷调查。我有一个数组和每个问题的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个选项。此外,所有问题都应视为一个整体并一起回答。

2 个答案:

答案 0 :(得分:0)

您需要为单选按钮指定相同的名称,然后对它们进行分组,以便随时只能选择一个。祝你的调查问卷好运。

答案 1 :(得分:0)

如果要对单选按钮进行分组,以便用户只能在多个选项之间选择一个答案,则必须为所有分组按钮设置相同的名称属性值:

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