javascript - 单选按钮测验

我正在尝试使用 JavaScript/Html 创建一个“测验”。在我开始之前，我只想说我是在 4 小时前发布这篇文章时才接触到这种语言的，所以请耐心等待。这是我到目前为止写的:

<!DOCTYPE html>
<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="Q1" value="A1">A1<br>
<input type="radio" name="Q1" value="A2">A2<br>
<input type="radio" name="Q1" value="A3">A3<br>
<input type="radio" name="Q1" value="A4">A4<br><br>
<input type="radio" name="Q2" value="A1">A1<br>
<input type="radio" name="Q2" value="A2">A2<br>
<input type="radio" name="Q2" value="A3">A3<br>
<input type="radio" name="Q2" value="A4">A4<br><br>
<input type="radio" name="Q3" value="A1">A1<br>
<input type="radio" name="Q3" value="A2">A2<br>
<input type="radio" name="Q3" value="A3">A3<br>
<input type="radio" name="Q3" value="A4">A4<br><br>
<input type="radio" name="Q4" value="A1">A1<br>
<input type="radio" name="Q4" value="A2">A2<br>
<input type="radio" name="Q4" value="A3">A3<br>
<input type="radio" name="Q4" value="A4">A4<br><br>
<input type="radio" name="Q5" value="A1">A1<br>
<input type="radio" name="Q5" value="A2">A2<br>
<input type="radio" name="Q5" value="A3">A3<br>
<input type="radio" name="Q5" value="A4">A4<br><br>
<input type="radio" name="Q6" value="A1">A1<br>
<input type="radio" name="Q6" value="A2">A2<br>
<input type="radio" name="Q6" value="A3">A3<br>
<input type="radio" name="Q6" value="A4">A4<br><br>
<input type="radio" name="Q7" value="A1">A1<br>
<input type="radio" name="Q7" value="A2">A2<br>
<input type="radio" name="Q7" value="A3">A3<br>
<input type="radio" name="Q7" value="A4">A4<br><br>
<input type="radio" name="Q8" value="A1">A1<br>
<input type="radio" name="Q8" value="A2">A2<br>
<input type="radio" name="Q8" value="A3">A3<br>
<input type="radio" name="Q8" value="A4">A4<br><br>
<input type="radio" name="Q9" value="A1">A1<br>
<input type="radio" name="Q9" value="A2">A2<br>
<input type="radio" name="Q9" value="A3">A3<br>
<input type="radio" name="Q9" value="A4">A4<br><br>
<input type="radio" name="Q10" value="A1">A1<br>
<input type="radio" name="Q10" value="A2">A2<br>
<input type="radio" name="Q10" value="A3">A3<br>
<input type="radio" name="Q10" value="A4">A4<br><br>
<script>

function checkTest()
{
var count = 0;
if ($('input:radio[name=Q1]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q2]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q3]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q4]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q5]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q6]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q7]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q8]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q9]:checked').val() == A1);
{
count = count + 1;
}
if ($('input:radio[name=Q10]:checked').val() == A1);
{
count = count + 1;
}
if (count > 6)
{
alert("Congratulations! You Passed!");
}
else
{
alert("You answered too many questions incorrectly. Try again.");
}
}
</script>
<button type="button" onclick="checkTest()">Submit Test!</button>
</form>

我想如果我只为我的所有答案选择“A1”，我会收到“祝贺”警报，但我什么也没收到。我得到了

($('input:radio[name=Q10]:checked').val()

直接来自本网站上的另一篇文章，所以我认为这不是问题所在。请帮忙!!

编辑:我知道 Javascript 是执行此操作的糟糕方法，但我真的只是想简化语言，而且，这只会在极小的范围内使用。

最佳答案

在 <body> 之前添加以下内容标签:

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

这会加载 jQuery进入您的页面，让您使用 $目的。

语法错误

你输入了;在每个 if 的末尾语句，无论是否满足条件，都阻止它们执行代码!
您写了 == "A1"错误的方式:== A1 , 让 JavaScript 尝试将选定的对象值与名为 A1 的空变量进行比较.

JavaScript/jQuery

function checkTest() {
    var count = 0;

    if ($('input[type="radio"][name=Q1]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q2]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q3]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q4]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q5]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q6]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q7]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q8]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q9]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q10]:checked').val() == "A1") {
        count++;
    }
    if (count > 6) {
        alert("Congratulations! You Passed!");
    } else {
        alert("You answered too many questions incorrectly. Try again.");
    }
}

Live Demo (JSFiddle)

PS:如果您刚开始编写 HTML 和 JavaScript，我强烈建议您不要使用 jQuery。

关于javascript - 单选按钮测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17602438/

javascript - 单选按钮测验

语法错误

Live Demo (JSFiddle)

上一篇：html - 更改 ID 内的链接和字体颜色

下一篇：php - 如何阻止机器人在 PHP 脚本上运行某些代码？