1

以下のHTMLフォーム（ラジオボタン）には、回答A、B、Cの3つの質問があります。

<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. 回答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/

4

2 に答える 2

1

考えられる解決策の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/

于 2012-09-17T09:49:56.800 に答える
0

ここで私は上記の問題のために完全なビンを作りました。デモリンクも確認できます。

デモ： 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

于 2012-09-17T11:40:13.400 に答える