1

我正在尝试使用 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 是一种不好的方法，但我真的只是想降低语言，此外，这只会在极小的范围内使用。

4

3 回答 3

4

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

现场演示（JSFiddle）

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

于 2013-07-11T20:06:41.763 回答
1

您的checkTest功能可以缩短，因为在一组单选按钮中，无论如何只能检查一个：

function checkTest() {
    var count = 0;

    for (var i=0,$el=$('input[type="radio"]:checked'),size=$el.size(); i<size; i++){ if ($el.eq(i).val() === 'A1') count++; }

    if (count > 6) alert("Congratulations! You Passed!");
    else alert("You answered too many questions incorrectly. Try again.");
}
于 2013-07-11T20:24:26.263 回答
1 
($('input:radio[name=Q10]:checked').val() // belongs to jQuery

您正在使用，因此在其中添加相应的脚本。

你的身份声明也应该是

if ($('input:radio[name=Q1]:checked').val() === 'A1');

右侧值缺少 ''（引号），最好使用===而不是==.

于 2013-07-11T20:11:12.417 回答