使用jQuery检查单选按钮的值并更改CSS类

Question

我正在处理100个问题的多选题测验（它在五个选项卡上显示20个问题）。如果人们可以看到页面源代码的答案，那就好了 - 这只是练习。

我目前拥有的是一个php数组（当前只有5个“测试”问题），它显示带有问题的行，四个单选按钮和一个提交按钮。这个想法是用户阅读问题，选择一个答案并提交。如果答案是正确的，单选按钮显示为绿色。如果它错了，单选按钮会变成红色，用户再次尝试。

这里是我的PHP代码的主要部分：

<?php 
$set = array(); 

$set[] = array('q'=>'Question1','qurl'=>'001','ans'=>'zhidao','a'=>'zhidao','b'=>'zhidou','c'=>'zhedao','d'=>'zhedau'); 
$set[] = array('q'=>'Question2','qurl'=>'002','ans'=>'dajia','a'=>'dazha','b'=>'dajia','c'=>'taqia','d'=>'tazha'); 
$set[] = array('q'=>'Question3','qurl'=>'003','ans'=>'boduo','a'=>'bodou','b'=>'buoduo','c'=>'boduo','d'=>'buodo'); 
$set[] = array('q'=>'Question4','qurl'=>'004','ans'=>'wanhuan','a'=>'wanchuan','b'=>'wanhuan','c'=>'wanchun','d'=>'wachuan'); 
$set[] = array('q'=>'Question5','qurl'=>'005','ans'=>'zhangkou','a'=>'zhongkou','b'=>'zhangko','c'=>'zhangkuo','d'=>'zhangkou'); 

shuffle($set); 
?> 

    <form> 
       <table> 
                       <tr class="q0">      
         <td><td><a class="question" href="#">Question goes here</a></td></td> 
         <td><input class="radiostyle" type="radio" name="answers" value ="zhidao" /> zhidao</td> 
         <td><input class="radiostyle" type="radio" name="answers" value ="zhidou" /> zhidou</td> 
         <td><input class="radiostyle" type="radio" name="answers" value ="zhedao" /> zhedao</td> 
         <td><input class="radiostyle" type="radio" name="answers" value ="zhedau" /> zhedau</td> 
         <td><input class="submit submit-0" type="submit" value="Submit" /></td> 
        </tr> 

这里是我的jQuery：

function checkAnswer(set) { 
if (set == 2) { /* if this is question set 2 out of the 5 kinds of questions */ 
     $('#questions .submit').click(function(e){ 
      var q = $(this).attr('class').split(' ')[1].split('-')[1]; 
      $('#questions .q'+q+' input').removeClass('radiowrong'); 
      var ans = $("input[@name=answers]:checked").val(); 
      if (ans == jset[q]['ans']) { 
       $('#questions .q'+q+' .radiostyle').addClass('radioright'); 
       alert('correct!');} 
      else { 
       $('#questions .q'+q+' .radiostyle').addClass('radiowrong');} 

      e.preventDefault(); 
     }); 
    } 
} 

现在，我还没有做了很多的jQuery所以请考虑我是初学者。如果我的代码看起来效率低下，我的道歉。我有两个关于我的代码的主要问题：

首先，我很难让我的checkAnswer函数正常工作。我插入了一个警报，看看我的逻辑是否正确，但我没有成功。关于如何让这个工作的任何建议？

二，如何修改我的jQuery，以便我可以正确更改单选按钮的类？同样，如果用户选择正确的答案，我正在寻找使单选按钮变为绿色，如果他们选错了，我会变成红色。

（请知道：如果有更简单的方式向用户展示他们是对还是错 - 就像改变他们选择的答案的文本颜色 - 我都是耳朵，真的什么都可以。

如果我需要提供更多信息，请告诉我。

很多很多，谢谢。

Answer 1

首先，这是一个解决方案的工作示例 - jsfiddle.net/avrelian/hrnDG/2/。

下面是你的标记的简化版本。您可能会看到我在此处使用label标记。它更加便于用户使用，因为用户只需点击标签即可查看单选按钮。此外，标签风格也更简单（例如，在Mac OS上）。我使用“正确”和“错误”的类来标记适当的答案元素。

<form> 
<table> 
<tr class="q1">      
    <td><a class="question" href="#">What is my favorite language?</a></td> 
    <td> 
     <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" /> 
     <label for="answers_1_Java">Java</label></td> 
    <td> 
     <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" /> 
     <label for="answers_1_JavaScript">JavaScript</label></td> 
    <td> 
     <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" /> 
     <label for="answers_1_Ruby">Ruby</label></td> 
    <td> 
     <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" /> 
     <label for="answers_1_C#">C#</label></td> 
    <td><input class="submit submit-1" type="submit" value="Submit" /></td> 
    <td></td></tr></table></form>​ 

让我们将表示逻辑提取到CSS中。

input.right.checked + label { 
    color: green; 
} 

input.wrong.checked + label { 
    color: red; 
} 

最后，让我们为submit按钮设置处理程序。

$('.submit').click(function() { 
    $(this).closest('tr') 
     .find('[name="answers"]') 
      .removeClass('checked') 
     .filter(':checked') 
      .addClass('checked'); 
    return false; 
});​ 

N.B：该解决方案甚至可以用CSS3 :checked伪类更容易，因为你有没有必要提交按钮。请参阅示例 - jsfiddle.net/avrelian/hrnDG。

input.right:checked + label { 
    color: green; 
} 

input.wrong:checked + label { 
    color: red; 
}