多个单选按钮窗体、单个组无法检索值

Multiple radio button forms, single groups, can't retrieve values

本文关键字：检索 单个组 单选按钮 窗体      更新时间：2023-09-26

我一直在网上寻找答案，但没有找到任何有用的东西。我正在单个网页上编程测验。我不是一个具有多个单选按钮组的窗体，而是多个窗体，每个窗体都有自己的单选按钮组。

每次我运行代码从每个表单中获取值时，我得到的都不超过第一组;此后，我的函数调用的第二次迭代说我的表单字段变量未定义。

调用表单值检索代码的示例：

function submit_quiz(){
 var one, two, three;
 one = getRadioValue(document.getElementById("answers1"), "a1");
 alert(one);
 one = getRadioValue(document.getElementById("answers2"), "a2");
 alert(two);
 one = getRadioValue(document.getElementById("answers3"), "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="answerswer_selections" id="answers1">
    <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="answerswer_selections" id="answers2">
    <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="answerswer_selections" id="answers3">
    <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>

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

也不需要传递表单id，因为单选按钮的名称不同，document.getElementsByName可以用来获取该名称的单选按钮。然后循环通过节点列表找到选中的按钮。

同样在你的函数submit_quiz你正在提醒two和three变量，但它们实际上是未定义的。

var one, two, three; //Declared variable
 one = getRadioValue(document.getElementById("answers1"), "a1"); // Assigned to one
 alert(one);
//Assigned to one again but not two
     one = getRadioValue(document.getElementById("answers2"), "a2");
     alert(two); // alerting two but two in unassinged
   // Assigned to one again ,but alerting three
     one = getRadioValue(document.getElementById("answers3"), "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;
}

js小提琴

相关文章：