为什么这些单选按钮通过 javascript 执行它们的行为？

Question

我只是想知道为什么我的测验中的第一个问题可以有独立于其余问题的单选按钮，但在问题 1 之后，所有问题都充当一个单选按钮组？ 这是javascript：

window.onload = getQuizXml;

function getQuizXml() {
  var quiz = new XMLHttpRequest();
  quiz.onreadystatechange = function() {
    if (quiz.readyState == 4 && quiz.status == 200) {
      searchQuiz(quiz);


    }
  };
  quiz.open("GET", "FinalQuiz.xml", true);
  quiz.send();

}

function searchQuiz(quiz) {

  var i;
  //get data as xml file
  var xmldoc = quiz.responseXML;
  var test = "<form id = 'test'>";
  //start table
  //process data by record
  var x = xmldoc.getElementsByTagName("question");
  var errorMessage = "Error, Well does not exist.";
  for (i = 0; i < x.length; i++) {

    var questionNumber = x[i].getElementsByTagName("qnumber")[0].childNodes[0].nodeValue;
    var questionTitle = x[i].getElementsByTagName("qtitle")[0].childNodes[0].nodeValue;
    var a = x[i].getElementsByTagName("a")[0].childNodes[0].nodeValue;
    var b = x[i].getElementsByTagName("b")[0].childNodes[0].nodeValue;
    var c = x[i].getElementsByTagName("c")[0].childNodes[0].nodeValue;
    var d = x[i].getElementsByTagName("d")[0].childNodes[0].nodeValue;

    test += "<br>" + questionNumber + "." +
      "<br>" +
      questionTitle +
      "<br><br>" +
      "a)<input type='radio' value='a' name ='question'>" + a +
      "<br>" +
      "b)<input type='radio' value='b' name ='question'>" + b +
      "<br>" +
      "c)<input type='radio' value='c' name ='question'>" + c +
      "<br>" +
      "d)<input type='radio' value='d' name ='question'>" + d +
      "<br></form>";



    document.getElementById("displayquiz").innerHTML = test;

  }

}

这是 xml 的示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE finalquiz SYSTEM "FinalQuiz.dtd" >
<finalquiz>
  <question>
    <qnumber>1</qnumber>
    <qtitle>In a switch statement, the ________ case clause is used to process exceptional conditions and is usually listed last.</qtitle>
    <a>break</a>
    <b>default</b>
    <c>else</c>
    <d>then</d>
  </question>
  <question>
    <qnumber>2</qnumber>
    <qtitle>The technique of developing and maintaining a large program by constructing it from small, simple pieces is called ________.</qtitle>
    <a>divide and conquer</a>
    <b>modular programming</b>
    <c>multitasking</c>
    <d>multiprogramming</d>
  </question>
  <question>
    <qnumber>3</qnumber>
    <qtitle>All variables declared in function definitions are ________.</qtitle>
    <a>global variables</a>
    <b>static variables</b>
    <c>constant variables</c>
    <d>local variables</d>
  </question>

Answer 1

我认为您的单选按钮可以按不同的表单部分包装进行分组。但是您的字符串附加逻辑有一个错误。 您的代码结果如下：

<form>
  <input type='radio' value='a' name ='question'>
  <input type='radio' value='b' name ='question'>
  <input type='radio' value='c' name ='question'>
  <input type='radio' value='d' name ='question'>
</form>
<!-- there is a missing form start tag(<form>) here supposed to be -->
  <input type='radio' value='a' name ='question'>
...
</form>

所以您的代码需要如下更改。

 var test = "";
  for (i = 0; i < x.length; i++) {
    test += "<form id = 'test'>";        

    ...

    test += "<br>" + questionNumber + "." +
      "<br>" +
      questionTitle +
      "<br><br>" +
      "a)<input type='radio' value='a' name ='question'>" + a +
      "<br>" +
      "b)<input type='radio' value='b' name ='question'>" + b +
      "<br>" +
      "c)<input type='radio' value='c' name ='question'>" + c +
      "<br>" +
      "d)<input type='radio' value='d' name ='question'>" + d +
      "<br></form>";

Answer 2

name 属性用于分隔/分组单选按钮。

如果您从像 PHP 这样的服务器端查看此值，则该值将来自表单的帖子，如下所示：

$_POST['question']

如果您需要为另一个问题创建一个新组，请更改名称属性，如下所示：

<form>
  <div id='q1_label'>This is question 1:</div>
  <input type='radio' value='a' name ='question1'><span>A</span><br />
  <input type='radio' value='b' name ='question1'><span>B</span><br />
  <input type='radio' value='c' name ='question1'><span>C</span><br />
  <input type='radio' value='d' name ='question1'><span>D</span><br />
  <div id='q2_label'>This is question 2:</div>
  <input type='radio' value='a' name ='question2'><span>A</span><br />
  <input type='radio' value='b' name ='question2'><span>B</span><br />
  <input type='radio' value='c' name ='question2'><span>C</span><br />
  <input type='radio' value='d' name ='question2'><span>D</span><br />
</form>

换句话说：

每个组中不同值的全部原因是为该字段名称提供发布的值。

服务器端现在可以像这样处理：

$q1 = $_POST['question1'];
$q2 = $_POST['question2'];

然后去将传递的数据与答题纸或类似的东西进行比较。