Javascript jQuery测验比较数组中的正确答案

我的HTML

<div class="questions">
    <p>Q1</p>
    <label><input name="q1" id="q1-a" type="radio" />Q1 ans A</label>
    <label><input name="q1" id="q1-b" type="radio" />Q1 ans B</label>
    <label><input name="q1" id="q1-c" type="radio" />Q1 ans C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input name="q2" id="q1-a" type="radio" />Q2 ans A</label>
    <label><input name="q2" id="q1-b" type="radio" />Q2 ans B</label>
    <label><input name="q2" id="q1-c" type="radio" />Q2 ans C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input name="q3" id="q1-a" type="radio" />Q3 ans A</label>
    <label><input name="q3" id="q1-b" type="radio" />Q3 ans B</label>
    <label><input name="q3" id="q1-c" type="radio" />Q3 ans C</label>
</div>
<a href="#" id="checkAns">Check</a>

下面是我想要比较的答案数组

answers: { q1: 'a', q2: 'b', q3: 'a'}

如果用户触发单选按钮，那么它将显示警报，如果是正确的或错误的，那么它将返回真；如果错错了错了，那么现在是它显示另一个问题的时候了

---

在检查用户答案时，我确实希望避免使用其他选项。这是否可能？

首先，不要忘记在每个单选按钮上添加值。此外，此处实际上不需要

id

，除非您需要在每个单选按钮上执行某些操作：

<div>
    <label><input name="q1" type="radio" value="a" />Q1 A</label>
    <label><input name="q1" type="radio" value="b" />Q1 B</label>
    <label><input name="q1" type="radio" value="c" />Q1 C</label>
</div>

---

更新答案：

HTML和CSS

我认为你不需要锚来点击，因为这一次脚本会在单选按钮被触发后立即检查答案

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

---

只需根据需要修改脚本。希望这次是对的P

我复印时会更加小心-paste@o谢谢，伙计，但它确实加载了所有警报。我想让它做的是加载每个答案的警报，每个单选按钮都由用户触发。啊，我不好没有仔细阅读你的问题。我已经添加了更新的答案。@o q没关系，伙计，现在工作得很好！非常感谢你！！

var answers = {q1 : 'a', q2 : 'b', q3 : 'a'};

$('#checkAns').click(function(e) {
    $.each(answers, function(question, answer) {
        if($('input:radio[name="' + question + '"]:checked').val() == answer)
            alert(question + ': True');
        else
            alert(question + ': False!');
    });
    e.preventDefault();
});

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

var answers = {q1: 'a', q2: 'b', q3: 'a'};

$('input:radio').click(function() {
    var container = $(this).parents('div');
    var question = $(this).attr('name');
    var answer = $(this).val();

    alert(answers[question] == answer);

    container.addClass('hide');
    container.next().removeClass('hide');
});