javascript - 带单选按钮的动态警报

Question

我有下面这个 HTML 表单(单选按钮)，其中包含 3 个问题，答案为 A、B 和 C。

<fieldset>
<legend>Question 1:</legend>
<label><input type="radio" value="1" name="first" />A</label> <br />
<label><input name="first" type="radio" value="2" />B</label> <br />
<label><input name="first" type="radio" value="3" />C</label> <br />
</fieldset>

<fieldset>
<legend>Question 2:</legend>
<label><input type="radio" value="1" name="second" />A</label> <br />
<label><input name="second" type="radio" value="2" />B</label> <br />
<label><input type="radio" value="3" name="second" />C</label> <br />
</fieldset>

<fieldset>
<legend>Question 3:</legend>
<label><input type="radio" value="1" name="third" />A</label> <br />
<label><input name="third" type="radio" value="2" />B</label> <br />
<label><input type="radio" value="3" name="third" />C</label> <br />
</fieldset>

<div id="display">Please answer all the questions</div>​

这里我需要一个 jQuery 脚本来动态显示 3 个答案。 3 个答案应如下所示:

1. 答案 1(如果有 2 个或更多答案为 A)

2. 答案 2(如果 2 个或更多答案是 B)

3. 答案 3(如果 2 个或更多答案是 C)

如果答案是 A、B 和 C，则不会显示任何内容。

我不是 jQuery 专业人士，但我只有脚本(如下)来检查答案是否完成。谁能帮我解决这个问题吗？

$('input:radio').click(
function() {
    var q = $('fieldset').length;
    console.log('q: ' + q + '; checked: ' + $('input:radio:checked').length);
    if ($('input:radio:checked').length == q){
        $('#display').text('You\'ve completed all questions!');
    }
    else {
        $('#display').text('You\'ve not yet finished...');
    }
});​

提前致谢。JSFiddle 演示 - http://jsfiddle.net/BhanuChawla/KSd3M/

Answer 1

这是一种可能的解决方案:

var answers = {
    "1": "Answer 1",
    "2": "Answer 2",
    "3": "Answer 3"
};

$("input[type='radio']").on("click", function() {
    var vals = $("fieldset input:checked").map(function() {
        return this.value;
    }).get().sort();
    for (var i = 0; i < vals.length; i++) {
        if (vals[i] == (vals[i + 1] || null)) {
            $("#display").text(answers[vals[i]]);
            break;
        }
    }
});​

演示: http://jsfiddle.net/mLnWP/