javascript - 多个单选按钮表单，单个组，无法检索值

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