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/

Answer 2

在这里，我已经为上述问题完成了完整的垃圾箱。您也可以查看演示链接。

演示： http ://codebins.com/bin/4ldqp74

HTML

<fieldset>
  <legend>
    Question 1:
  </legend>
  <label>
    <input type="radio" value="1" name="first" />
    A
  </label>

  <label>
    <input name="first" type="radio" value="2" />
    B
  </label>

  <label>
    <input name="first" type="radio" value="3" />
    C
  </label>

</fieldset>

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

  <label>
    <input name="second" type="radio" value="2" />
    B
  </label>

  <label>
    <input type="radio" value="3" name="second" />
    C
  </label>

</fieldset>

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

  <label>
    <input name="third" type="radio" value="2" />
    B
  </label>

  <label>
    <input type="radio" value="3" name="third" />
    C
  </label>
</fieldset>
<div id="display">
  Please answer all the questions
</div>

jQuery

$(function() {

    var answers = Array();
    $("input:radio").click(function() {
        var index = 0;
        if ($(this).is(":checked")) {
            index = $(this).closest("fieldset").index();
            answers[index] = $(this).val().trim();
        }
        for (var i = 0; i < answers.length; i++) {
            if ($("input:radio[value=" + answers[i] + "]:checked").length > 1) {
                $("#display").text("Max Answers Selected:" + answers[i]);
                break;
            } else if ($("input:radio:checked").length >= 3) {
                $("#display").text("All have different Answers..!");
            }
        }

    });

});

CSS

label{
  float:left;
  margin-left:10px;
  font-size:14px;
}

#display{
  margin-top:10px;
  border:1px solid #335599;
  padding:5px;
  font-size:14px;
  background:#a4a1df;
}

演示： http ://codebins.com/bin/4ldqp74