Question

我的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>

MY JS

$("#checkAns").click(function(){

}

以下是我要比较的答案数组

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

如果用户触发单选按钮，则会显示警告，如果是正确或错误，则它将返回true;如果错误，那么这是它将显示另一个回答问题的时间

我确实想避免在检查用户答案时是否可以这样做？

Answer 1

首先，不要忘记在每个单选按钮上添加值。此外，这里并不需要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>

然后，为了检查答案，您可以使用：

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();
});

更新回答：

HTML＆amp; 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>

使用jQuery的Javascript

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');
});

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

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

1 个答案: