多个单选按钮形式，单个组无法检索值

Question

我一直在网上寻找答案，并没有发现任何有用的东西。我正在一个网页上编写测验。我没有一个具有多个单选按钮组的表单，而是多个表单，每个表单都有自己的单选按钮组。每当我运行我的代码来获取每个表单中的值时，我就没有比第一组更多的东西了。此后，我的函数调用的第二次迭代说我的表单字段的变量是未定义的。

呼叫的实施例，以形成值检索代码：的代码形式和单选按钮

function submit_quiz(){ 
var one, two, three; 
one = getRadioValue(document.getElementById("ans1"), "a1"); 
alert(one); 
one = getRadioValue(document.getElementById("ans2"), "a2"); 
alert(two); 
one = getRadioValue(document.getElementById("ans3"), "a3"); 
alert(three); 
} 
function getRadioValue(form, name){ 
var val; 
var i; 

var f = form; 
var n = name; 

radios = f.elements[n]; 
len = radios.length; 

for(i=0; i<len; i++){ 
    if(radios[i].checked){ 
    val = radios[i].value; 
    break; 
    } 
} 
return val; 
} 

实施例：

<ol class="quiz_question"> 
    <li id="q1"> 
    <p>According to Sun Tzu, the study of war is what to the state?</p> 
    <form class="answer_selections" id="ans1"> 
    <input name="a1" value="1" type="radio" />A useless endeavor to be avoided.<br /> 
    <input name="a1" value="2" type="radio" />Too costly to be of any practical use.<br /> 
    <input name="a1" value="3" type="radio" />A matter of life and death.<br /> 
    <input name="a1" value="4" type="radio" />Important to the state's wealth.<br /> 
    </form> 
    </li> 
    <li id="q2"> 
    <p>Sun Tzu says long wars have what effect?</p> 
    <form class="answer_selections" id="ans2"> 
    <input name="a2" value="1" type="radio" />Both the state's wealth, and the army's strength wane.<br /> 
    <input name="a2" value="2" type="radio" />Then enemy's strenght is steadily ground into nothing.<br /> 
    <input name="a2" value="3" type="radio" />Both sides will eventually choose a mutually agreable peace.<br /> 
    <input name="a2" value="4" type="radio" />There will be no effect as the war will become a stalemate.<br /> 
    </form> 
    </li> 
    <li id="q3"> 
    <p>If your army is five times as big as your enemies, what is your best course of action?</p> 
    <form class="answer_selections" id="ans3"> 
    <input name="a3" value="1" type="radio" />Attempt to surround and destroy the enemy's forces.<br /> 
    <input name="a3" value="2" type="radio" />Pull back, and wait for a better opportunity to attack.<br /> 
    <input name="a3" value="3" type="radio" />Split your forces in two, and send one to attack the enemy's rear.<br /> 
    <input name="a3" value="4" type="radio" />Attack immediatly, unless the enemy holds some other serious advantage.<br /> 
    </form> 
    </li> 

Answer 1

找不到按钮以提交测验。所以必须添加一个按钮并将侦听器onclick附加到它。

同样没有必要通过表格id，由于单选按钮的名称不同，所以可以使用document.getElementsByName来获得该名称的单选按钮。然后按节点列表循环查找选中的按钮。

同样在您的功能submit_quiz您正在提醒two & three变量，但它们实际上是未定义的。

var one, two, three; //Declared variable 
one = getRadioValue(document.getElementById("ans1"), "a1"); // Assigned to one 
alert(one); 
//Assigned to one again but not two 
    one = getRadioValue(document.getElementById("ans2"), "a2"); 
    alert(two); // alerting two but two in unassinged 
    // Assigned to one again ,but alerting three 
    one = getRadioValue(document.getElementById("ans3"), "a3"); 
    alert(three); //three is unassigned 

document.getElementById("submitQuiz").onclick =function(){ 
submit_quiz(); 
} 

function submit_quiz(){ 
var one, two, three; 
one = getRadioValue("a1"); 
alert(one); 
two = getRadioValue("a2"); 
alert(two); 
three = getRadioValue("a3"); 
alert(three); 
} 



function getRadioValue(name){ 
var val ="" 
var _getCheckedRadio = document.getElementsByName(name); 
for(var i =0;i<_getCheckedRadio.length;i++){ 
if (_getCheckedRadio[i].checked){ 
    val = _getCheckedRadio[i].value; 
} 
} 
return val; 
} 

jsFiddle