Question

我正在尝试使用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是一种不好的方法，但我真的只是试图让语言失效，而且，这只会在极小的范围内使用。

Answer 1

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

Answer 2

($('input:radio[name=Q10]:checked').val() // belongs to jQuery

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

你的id语句也应该是

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

在右侧值上缺少''（引号），最好使用===代替==。

Answer 3

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

单选按钮测验

3 个答案:

语法错误

的JavaScript / jQuery的

Live Demo (JSFiddle)