0

ユーザーが回答しなければならない質問のリストがあります。各質問には、1 つは「最も多い」、もう 1 つは「最も少ない」という 2 つの回答があります。これらは 4 つの可能性のグループから選択されます。たとえば、次のようになります。

Q: チームの一員として働くとき、私は:

慎重に決定エキサイティングな怠け者

ユーザーが最も多くのオプションで「慎重」を選択すると、「最も少ない」と同じ答えを選択できないようにする方法を考え出そうとしています

2 つの回答が選択されると、スクリプトは次の質問を表示します。ここまでのところ、質問は適切に表示されますが、ユーザーは「最も多い」オプションと「最も少ない」オプションの両方で同じ回答を選択できます。コードは次のとおりです。 :

    <div id="question1">
    <label>Question 1:</label>

    <p class="most">Most</p>
    <label for="q1m1"><input type="radio" class="opt1" name="q1m" id="q1m1" value="10"> Enthusiastic</label>
    <label for="q1m2"><input type="radio" class="opt2" name="q1m" id="q1m2" value="8"> Bold</label>
    <label for="q1m3"><input type="radio" class="opt3" name="q1m" id="q1m3" value="6"> Diplomatic</label>
    <label for="q1m4"><input type="radio" class="opt4" name="q1m" id="q1m4" value="1"> Content</label>


    <p class="least">Least</p>
    <label for="q1l1"><input type="radio" class="opt1" name="q1l" id="q1l1" value="3"> Enthusiastic</label>
    <label for="q1l2"><input type="radio" class="opt2" name="q1l" id="q1l2" value="5"> Bold</label>
    <label for="q1l3"><input type="radio" class="opt3" name="q1l" id="q1l3" value="6"> Diplomatic</label>
    <label for="q1l4"><input type="radio" class="opt4" name="q1l" id="q1l4" value="0"> Content</label>


    <div class="buttons">
        <div class="q1_submit">Next</div>
    </div><!-- .buttons -->

</div><!-- #question1 -->   

<div id="question2" style="display: none;">
    <label>Question 2:</label>

    <p class="most">Most</p>
    <label for="q2m1"><input type="radio" class="opt1" name="q2m" id="q2m1" value="10"> Careful</label>
    <label for="q2m2"><input type="radio" class="opt2" name="q2m" id="q2m2" value="7"> Determined</label>
    <label for="q2m3"><input type="radio" class="opt3" name="q2m" id="q2m3" value="6"> Convincing</label>
    <label for="q2m4"><input type="radio" class="opt4" name="q2m" id="q2m4" value="3"> Good-natured</label>

    <p class="least">Least</p>
    <label for="q2l1"><input type="radio" class="opt1" name="q2l" id="q2l1" value="1"> Careful</label>
    <label for="q2l2"><input type="radio" class="opt2" name="q2l" id="q2l2" value="3"> Determined</label>
    <label for="q2l3"><input type="radio" class="opt3" name="q2l" id="q2l3" value="6"> Convincing</label>
    <label for="q2l4"><input type="radio" class="opt4" name="q2l" id="q2l4" value="9"> Good-natured</label>


    <div class="buttons">
        <div class="q2_prev">Previous</div>
        <div class="q2_submit">Next</div>
    </div><!-- .buttons -->

</div><!-- #question2 -->

ここにjqueryがあります：

    $( ".q1_submit" ).click(function() {
    if($("input[name='q1m']::checked").length > 0 && $("input[name='q1l']::checked").length > 0){
        // go on with script
        $( "#question2" ).show( "slow" );
        $( "#question1" ).hide( "slow" );
     }else{
        // NOTHING IS CHECKED
        alert('Please chose one most and one least');
     }      
});

$( ".q2_prev" ).click(function() {
    $( "#question1" ).show( "slow" );
    $( "#question2" ).hide( "slow" );
});

だから私が達成しようとしているのは、ラジオボタンの各グループのクラスが同じである場合、検証エラーをスローすることです.jsスクリプトのifステートメントにクラスを追加する方法はありますか? 何かのようなもの：

if($("input[name='q1m'].class") == ($("input[name='q1l'].class") {エラー} ELSE {キャリーオン}

前もって感謝します

4

1 に答える 1

0

ラジオ ボタンを機能させるには、1 つの回答のみが必要なすべてのオプションに同じ名前を付ける必要があります。入力の名前を作り直した場合、物事を管理するために jQuery は必要ないかもしれないと思います。

私はこれを試しました：

  <label>Question 1:</label>

  <p class="most">Most</p>
  <label for="q1m1"><input type="radio" class="opt1"  name="q1-1" value="10"> Enthusiastic</label>
  <label for="q1m2"><input type="radio" class="opt2"  name="q1-2" value="8"> Bold</label>
  <label for="q1m3"><input type="radio" class="opt3"  name="q1-3" value="6"> Diplomatic</label>
  <label for="q1m4"><input type="radio" class="opt4"  name="q1-4" value="1"> Content</label>


  <p class="least">Least</p>
  <label for="q1l1"><input type="radio" class="opt1"  name="q1-1" value="3"> Enthusiastic</label>
  <label for="q1l2"><input type="radio" class="opt2"  name="q1-2" value="5"> Bold</label>
  <label for="q1l3"><input type="radio" class="opt3"  name="q1-3" value="6"> Diplomatic</label>
  <label for="q1l4"><input type="radio" class="opt4"  name="q1-4" value="0"> Content</label>

JavaScript なしで、Most Bold をクリックすると、次に Least Bold、Most がオフになります。それはあなたが必要とするものですか？

必要に応じて元に戻すことができる ID パラメータを取り出したことに気付くと思いますが、ここで重要なのは、両方の入力にEnthusiastic同じ名前が付けられ、両方の入力に同じ名前が付けられていることです。q1-1Boldq1-2

そして...この方法で名前を変更する場合は、送信されたデータの構造が異なるため、必ずフォームハンドラーを更新してください。

ここで取り上げなかったのは、4 つのカテゴリすべてが確実に回答を得られるようにするための、あらゆる種類の JS 検証です。それも必要な場合は、質問 div (またはそのようなもの) に 4 つのチェック済み入力があることを確認するための簡単なチェックがあります。

于 2013-11-13T16:27:55.570 に答える