为什么这些单选按钮通过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

名称属性是用于分隔/分组单选按钮的属性。

如果从像PHP这样的服务器端看待这个问题，那么价值将来自表单的发布，如下所示：

$_POST['question']

如果您需要对另一个问题进行新的分组，请更改name属性，如下所示：

<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'];

然后将传递的数据与答案表或类似的内容进行比较。