如何使用单选按钮连接数组元素

Question

我正在尝试使用单选按钮选项进行简单测验。测验有一个按钮，应该动态删除并添加下一个问题，并设置单选按钮。问题和选项存储在单独的数组中。我被困在试图用单选按钮连接每个选项。任何想法如何去解决这个问题？

P.S.刚开始学习JS，你可能会从我的代码中知道

<script type="text/javascript"> 
var questionsArray = new Array(); 
questionsArray[0] = "1. Who's the president of the US?"; 
questionsArray[1] = "2. What is the capital city of France?"; 
questionsArray[2] = "3. What is your favorite food?"; 

var choicesArray = new Array(); 
choicesArray[0] = ["Lebron James", "Barack Obama", "George Bush","George Clooney"]; 
choicesArray[1] = ["Nairobi","London","Paris","Sydney"]; 
choicesArray[2] = ["Pizza","Sushi","Pasta","Lobster"]; 

function createRadioElement(name){ 
    var radioHTML = '<input type="radio" name="'+name+'"'+'/>'; 

    var radioFragment = document.createElement("div"); 
    radioFragment.innerHTML = radioHTML; 

    return radioFragment.firstChild; 
} 

var index = -1; 
function questionSwapOnclick(){ 
    while(index < questionsArray.length){ 
    index++; 
    document.getElementById("question").innerHTML = questionsArray[index]; 

    if(document.getElementById("question").innerHTML == "undefined"){ 
     document.getElementById("question").innerHTML = "Finished the quiz!" 
     document.getElementById("choices").innerHTML = "" 
    } 

    var splitChoices = choicesArray[index].join("<br />"); 
    document.getElementById("choices").innerHTML = splitChoices; 
    return true; 
    } 
} 

</script> 

Answer 1

为什么不把问题保留在html中？ JS Fiddle

<form id="questions"> 
<div class="question active"> 
    <p>1. Who's the president of the US?</p> 
    <label> 
     <input type="radio" name="q1" value="1">Lebron James</label> 
    <label> 
     <input type="radio" name="q1" value="2">Barack Obama</label> 
    <label> 
     <input type="radio" name="q1" value="3">George Bush</label> 
</div> 
<div class="question" style="display: none;"> 
    <p>2. What is the capital city of France?</p><label> 
     <input type="radio" name="q2" value="1">Nairobi</label> 
    <label> 
     <input type="radio" name="q2" value="2">London</label> 
    <label> 
     <input type="radio" name="q2" value="3">Paris</label> 
</div> 
<div class="question" style="display: none;"> 
    <p>3. What is your favorite food?</p> 
    <input type="radio" name="q3" value="1">Pizza</label> 
    <label> 
     <input type="radio" name="q3" value="2">Sushi</label> 
    <label> 
     <input type="radio" name="q3" value="3">Pasta</label> 
</div> 
<hr> <a href="#" id="next">Next question »</a> 

// used jquery 1.11.0 
$(function() { 

var questions = $('#questions'); 
var next_btn = $('#next'); 

next_btn.on('click', function() { 
    var active_question = questions.find('.active'); 

    if (active_question.find('input[type=radio]:checked').length) { 
     active_question.slideUp(500, function(){ 
      active_question.removeClass('active'); 
     }); 
     if(active_question.next('.question').length){ 
      active_question.next('.question').addClass('active').slideDown(500); 
     } 
     else { 
      alert('Thank you!'); 
      alert(questions.serialize()); 
      questions.hide(); 
     } 
    } 
    else { 
     alert('Select answer!'); 
    } 
}); 
});