我正在研究使用单选按钮的多项选择测验脚本。我想添加一个功能，当选择单选按钮时，它会检查如果选择了正确的答案，则选择的单选按钮会突出显示为绿色。如果选择了错误答案，则所选单选按钮将突出显示为红色，并且正确答案将突出显示为绿色。然后启用提交按钮。
当我点击提交按钮时，它会转到下一个问题并重复进行，直到测验结束。问题是突出显示仅在单击提交按钮后才起作用。并且测验从第二个问题停止工作。我该如何解决？我已经在下面包含了jsfiddle和代码。有人可以帮忙解决这个问题。
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is 10 + 4?", "12", "14", "16", "B"],
["What is 20 - 9?", "7", "13", "11", "C"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>" + question + "</h3>";
test.innerHTML += "<input type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>";
test.innerHTML += "<input type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>";
test.innerHTML += "<input type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>";
test.innerHTML += "<button onclick='checkAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>";
}
function checkAnswer() {
debugger;
if ($("#test input:checked").val() == questions[pos][4]) {
// correct question clicked
$("#test input:checked+label").css("background-color", "green");
correct++;
}
else {
// wrong question clicked
$("#test input:checked+label").css("background-color", "red");
}
setTimeout(function () {
pos++;
renderQuestion();
}, 1000);
}
$("document").ready(function () {
renderQuestion();
var choiceClicked = false;
if (!choiceClicked) {
$("#test input").change(function () {
choiceClicked = true;
$("#choiceSubmit").removeAttr("disabled");
});
}
});
答案 0 :(得分：1)
我认为那是https://jsfiddle.net/n59y2qaa/12/
这是因为当您单击/更改单选按钮时，不会调用高亮显示的checkAnswer()。
那是因为按下提交后你会把新的radiobuttons带到文档中，所以你也必须为它们设置$("#test input").change(function () {})。
div#test {
border: #000 1px solid;
padding: 10px 40px 40px 40px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2 id="test_status"></h2>
<div id="test"></div>
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is 10 + 4?", "12", "14", "16", "B"],
["What is 20 - 9?", "7", "13", "11", "C"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>" + question + "</h3>";
test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>";
test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>";
test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>";
test.innerHTML += "<button onclick='nextAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>";
}
function checkAnswer() {
choiceClicked = true;
$("#choiceSubmit").removeAttr("disabled");
$("#test label").css("background-color", "transparent");
if ($("#test input:checked").val() == questions[pos][4]) {
// correct question clicked
$("#test input:checked+label").css("background-color", "green");
correct++;
}
else {
// wrong question clicked
$("#test input:checked+label").css("background-color", "red");
}
}
function nextAnswer(){
setTimeout(function () {
pos++;
renderQuestion();
}, 1000);
}
$("document").ready(function () {
renderQuestion();
});
</script>
</html>
答案 1 :(得分：1)
由于您将checkAnswer（）绑定到onclick事件，因此在动态创建元素时它不会绑定。所以最好使用类似
的内容$（“document”）。ready（function（）{
renderQuestion();
var choiceClicked = false;
$(document).on("click","#choiceSubmit",function(){
checkAnswer();
})
$(document).on("click","input[type=radio][name=choices]",function(){
$("#choiceSubmit").removeAttr("disabled");
})
});
checkAnswer（）方法应修改为
function checkAnswer() {
debugger;
if ($("#test input:checked").val() == questions[pos][4]) {
// correct question clicked
console.log($("#test input:checked").val())
$("#test input:checked+label").addClass('green-background')
$("#test input:checked").addClass('green-background')
correct++;
}
else {
// wrong question clicked
$("#test input:checked+label").addClass('red-background')
$("#test input:checked").addClass('red-background')
}
setTimeout(function () {
pos++;
renderQuestion();
}, 1000);
}
最后，css要做的诀窍如下：
div#test{
border: #000 1px solid;
padding: 10px 40px 40px 40px;
}
input[type='radio']:checked:before {
background:red;
}
input[type='radio'] {
-webkit-appearance:none;
width:20px;
height:20px;
border:1px solid darkgray;
border-radius:50%;
outline:none;
box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
.green-background{
background-color: green;
}
.red-background{
background-color: red;
}
这是小提琴链接https://jsfiddle.net/g8ycw0gw/2/ 希望这可以帮助！欢呼声!!