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

Question

我想进行在线测试，但是下面的代码存在一些问题。

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

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

我该怎么办？ 当我现在运行代码时，即使没有选中任何单选按钮，或者仅选中了一组中的一个按钮，颜色也会改变。

 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); } 

 <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> 

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

好吧，恩：将它们分组。 您的代码和html有很多错误。 ID不一致，您正在使用内联事件处理程序，代码本身很庞大，等等。

如果将单选按钮与周围的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演示的