Question

我想进行在线测试，但我在下面的代码中遇到了一些问题。

我希望它标记正确和错误的答案，并在按下按钮时显示分数。

现在我遇到以下问题：我希望第一个switch语句仅用于第一组单选按钮，第二个switch语句用于第二组按钮，依此类推。

我怎么能这样做？当我现在运行代码时，即使没有选中任何单选按钮，或者只检查其中一个组中的按钮，颜色也会改变。

＆＃13;

function showScore() {
  var check;
  var total = 0;
  var yourmark = "your score is  ";

  switch (document.getElementById('q12').checked) {
    case true:
      total = total + 1;
      document.getElementById('text1').style.color = "green";
      break;
    case false:
      document.getElementById('text0').style.color = "red";
      document.getElementById('text2').style.color = "red";
      document.getElementById('text1').style.color = "green";
      break;
  }
  switch (document.getElementById('q13').checked) {
    case true:
      document.getElementById('text0.1').style.color = "green";
      total = total + 1;
      break;
    case false:
      document.getElementById('text1.1').style.color = "red";
      document.getElementById('text1.2').style.color = "red";
      break;
  }

  alert(yourmark + total);
}

＆＃13;

<input type="radio" name="question1" id="q11" value="false">
<text id="text0">Question 1-first option</text>
<br>
<input type="radio" name="question1" id="q12" value="true">
<text id="text1">Question 1- second option</text>
<br>
<input type="radio" name="question1" value="false">
<text id="text2">Question 1- third option</text>

<br>
<br>

<input type="radio" name="question2" id="q13" value="false">
<text id="text0.1">Question 1-first option</text>
<br>
<input type="radio" name="question2" id="q12" value="true">
<text id="text1.1">Question 1- second option</text>
<br>
<input type="radio" name="question2" value="false">
<text id="text1.2">Question 1- third option</text>
<br>

<button onclick="showScore();">Show my score</button>

＆＃13;

Answer 1

试试这个：

var questions = document.forms.myForm.getElementsByClassName('question');
document.getElementById('showScore').onclick = function showScore() {
  var total = 0,
      correct = 0;
  for(var i=0; i<questions.length; ++i) {
    var chosen = questions[i].querySelector(':checked');
    if(chosen) {
      questions[i].classList.add('show-score');
      correct += chosen.value == 'true';
      ++total;
    }
  }
  alert("Your score is " + correct + " out of " + total);
};

.question {
  margin: 1em 0; /* Separation between questions */
}
.question > label:after { /* Line-break after each answer */
  content: '';
  display: block;
}
.question.show-score > input[value=true]+label {
  color: green;
}
.question.show-score > input[value=false]+label {
  color: red;
}

<form name="myForm">
  <div class="question">
    <input type="radio" name="question1" id="q-1-1" value="false">
    <label for="q-1-1">Question 1 - first option</label>
    
    <input type="radio" name="question1" id="q-1-2" value="true">
    <label for="q-1-2">Question 1 - second option</label>

    <input type="radio" name="question1" id="q-1-3" value="false">
    <label for="q-1-3">Question 1 - third option</label>
  </div>
  <div class="question">
    <input type="radio" name="question2" id="q-2-1" value="false">
    <label for="q-2-1">Question 2 - first option</label>
    
    <input type="radio" name="question2" id="q-2-2" value="true">
    <label for="q-2-2">Question 2 - second option</label>

    <input type="radio" name="question2" id="q-2-3" value="false">
    <label for="q-2-3">Question 2 - third option</label>
  </div>
  <button id="showScore">Show my score</button>
</form>

请注意这些变化：

我从HTML中删除了内联事件侦听器，并使用JS
我删除了那些丑陋的<br>并使用了CSS而不是
我使用了<label>而不是无效的<text>。使用<label>，您还可以通过单击文本来检查电台。
我没有使用JS设置正确/错误答案的颜色，而是使用CSS。

Answer 2

嗯，ehr：把它们分组。您的代码和HTML有很多问题。 Id是不一致的，你使用内联事件处理程序，代码本身很笨重等。

如果您将radiobuttons与周围的div分组，请使用一致的ID labels而不是<text>标记，将标签格式保留为css并使用querySelector[All]，代码可以要短得多，真的。类似的东西：

document.querySelector('body').addEventListener('click', showScore);

function showScore(e) {
    var from = e.target || e.srcElement, fromtype = from.type;
    if ( !(fromtype && /radio/i.test(fromtype)) ) { return true; }
    var score = document.querySelectorAll('input:checked[value=true]').length;
    // .. do stuff with [score]
}

这在j sFiddle

中得到了证明

一组单选按钮的javascript条件语句

2 个答案: