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>

我需要的是一个动态显示3个答案的jQuery脚本。 3个答案应如下所示：

答案1（如果有2个或更多答案为A）
答案2（如果2个或更多答案是B）
答案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;
        }
    }
});

DEMO： 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

带单选按钮的动态警报

2 个答案: