多個單選按鈕形式，單個組無法檢索值

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