jQuery：異なるグループにチェックされていないラジオボタンがないか確認してください。

Question

私はradio buttonグループが多いクイズをしています。 1質問= 1ラジオボタングループのように、複数のradio buttonsがあります。ユーザーは各グループのradio buttonをチェックする必要があります。私はラジオボタンの各グループに独自のクラスを与え、ループを使用してこれらのグループをチェックすることにしました。何らかの理由で - コードが動作しません。ここでは、コードです：

var num = 1; 
 
$("#submit_button").click(function() { 
 
    var alarm = 0; 
 
    $(".input_value" + num).each(function(){ 
 
    if(!$(this).is(':checked')) { 
 
     alarm = 1; 
 
    } else { 
 
     num++; 
 
    } 
 
    }); 
 

 
    if(alarm == 1) { 
 
    $("#failure").show(200); 
 
    $("#failure").fadeOut(2500); 
 
    } else { 
 
    $("#success").show(200); 
 
    $("#success").fadeOut(2500); 
 
    } 
 
});

#success { 
 
\t display: none; 
 
\t margin-top: 50px 
 
} 
 

 
#failure { 
 
\t display: none; 
 
\t margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section id="success"> 
 
    <p>Great! Thank you!</p> 
 
</section> 
 

 
<section id="failure"> 
 
    <p>You have to select at least 1 radiobutton in each group!</p> 
 
</section> 
 

 
<section id="submit"> 
 
    <input type="submit" name="submit" id="submit_button" value="Send!"> 
 
</section>

jsFiddle：https://jsfiddle.net/k3Luw4hx/

Answer 1

あなたのロジックに誤りがあるようです。何かがチェックされたらループから脱出する必要があります。つまり、最初に「答えられた」質問を見つけたら、その質問から脱却して続行する必要があります。しかし、その質問に対する回答が見つからない場合にのみ、アラームフラグを設定する必要があります。コードでは、一致するすべての要素がループされ、チェックされていないオプションが見つかるとalarm = 1を設定します。

編集：

私はここで、この論理の問題に非常に洗練ソリューションを作った：https://jsfiddle.net/9r7t3rgc/8/の問題の核心は、あなたがループに各質問を必要とし、それが答えかしていないかどうかを判断ということです。あなたが提供したコードはそれをしません。

また、.propを使用して、要素のチェックされた状態を確認してください。

$(".input_value" + num).each(function(){ 
    if(!$(this).prop('checked')) { 
     alarm = 1; 
    } else { 
     num++; 
    } 
}) 

Answer 2

主な問題は、それぞれのラジオボタンがコードが失敗しているかどうかを確認することです。そのクラスの各ボタンではなく、クラス.input_value1.input_value2.input_value3であることを確認する必要があります。ここで

var num = 1; 
 

 
$("#submit_button").click(function() { 
 
    var total_cb = $(".rate_input").length; 
 
    var alarm = 0; 
 

 
    for(var key=1;key<=total_cb;key++) { 
 
    if (!$('.input_value'+key).is(':checked')) { 
 
     alarm = 1; 
 
    } 
 
    } 
 
    
 
    if (alarm == 1) { 
 
    $("#failure").show(200); 
 
    $("#failure").fadeOut(2500); 
 
    } else { 
 
    $("#success").show(200); 
 
    $("#success").fadeOut(2500); 
 
    } 
 
});

#success { 
 
    display: none; 
 
    margin-top: 50px 
 
} 
 

 
#failure { 
 
    display: none; 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section id="success"> 
 
    <p>Great! Thank you!</p> 
 
</section> 
 

 
<section id="failure"> 
 
    <p>You have to select at least 1 radiobutton in each group!</p> 
 
</section> 
 

 
<section id="submit"> 
 
    <input type="submit" name="submit" id="submit_button" value="Send!"> 
 
</section>

Answer 3

あなたが入力中の. rate_inputと、ループをループソリューションhttps://jsfiddle.net/1pycve38/2/

var num = 1; 
 
$("#submit_button").click(function() { 
 
    var alarm = []; 
 

 
    $('.rate_input').each(function(i){ 
 
    alarm[i] = 0; 
 
    $(this).find("input.input_value").each(function(){ 
 
     if($(this).is(':checked')) { 
 
     alarm[i] = 1; 
 
     } 
 
    }); 
 
    }); 
 
     
 
    if(alarm.indexOf(0) >= 0) { 
 
    $("#failure").show(200); 
 
    $("#failure").fadeOut(2500); 
 
    } else { 
 
    $("#success").show(200); 
 
    $("#success").fadeOut(2500); 
 
    } 
 
});

#success { 
 
\t display: none; 
 
\t margin-top: 50px 
 
} 
 

 

 
#failure { 
 
\t display: none; 
 
\t margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value1" name="q1" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value2" name="q2" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="rate_input"> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=1>1</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=2>2</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=3>3</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=4>4</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=5>5</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=6>6</label> 
 
    <label><input type="radio" class="input_value input_value3" name="q3" value=7>7</label> 
 
    </div> 
 
</section> 
 

 
<section id="success"> 
 
    <p>Great! Thank you!</p> 
 
</section> 
 

 
<section id="failure"> 
 
    <p>You have to select at least 1 radiobutton in each group!</p> 
 
</section> 
 

 
<section id="submit"> 
 
    <input type="submit" name="submit" id="submit_button" value="Send!"> 
 
</section>

で行きます。

アラームは答えがチェックされている場合、その値が他の1 0

なり、arrayであるが、これはあなたを助けることを願っています。