當所有具有特定類的單選按鈕被檢查時，jQuery執行一個動作

Question

我必須開發一個問題模板，它一次在頁面上加載3個問題。當3個問題都已被回答（選擇了其單選按鈕）後，它將轉到下一部分。下面是輸入代碼：

<input type='radio' name='q_1' class='section_1' value=1 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.25 required> 
 

 
<input type='radio' name='q_2' class='section_1' value=1 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.25 required> 
 

 
<input type='radio' name='q_3' class='section_1' value=1 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.25 required>

我要確保，一旦名爲「Q_1」，「Q_2」和「q_3」一個單選按鈕從「section_1」選擇，我們繼續前進到第二部分。我如何用簡單的jQuery代碼來解決這個問題？

Answer 1

您需要使用更改事件：

• 您可以使用:radio selector

• $（ '：無線電[名^ = 「Q _」] section_1。'）選擇與類的所有無線電設備section_1和名稱以q_開頭（所以，在你的情況下，q_1，q_2和q_3）。

• change事件，因爲：

  ...單選按鈕，該事件是當用戶進行選擇立即觸發....

• 測試，如果所有的無線電設備進行檢查： $（ '：無線電[名^ = 「q _」] section_1：檢查'）長度== 3

$(function() { 
 
    $(':radio[name^="q_"].section_1').on('change', function(e) { 
 
    if ($(':radio[name^="q_"].section_1:checked').length == 3) { 
 
     console.log('ALL required are checked!'); 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type='radio' name='q_1' class='section_1' value=1 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.25 required> 
 
<br> 
 
<input type='radio' name='q_2' class='section_1' value=1 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.25 required> 
 
<br> 
 
<input type='radio' name='q_3' class='section_1' value=1 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.25 required>

。

Answer 2

我覺得沒有問題，在你的代碼，但只考慮一兩件事，HTML5「要求」只在上面的屬性IE8的作品。

您可以使用http://caniuse.com/網站進行檢查html5屬性在哪個瀏覽器上工作。

請用下面的代碼檢查你的代碼。

<form action="HtmlPage1.html"> 
    <input type='radio' name='q_1' class='section_1' value="1" required> 
    <input type='radio' name='q_1' class='section_1' value="0.75" required> 
    <input type='radio' name='q_1' class='section_1' value="0.5" required> 
    <input type='radio' name='q_1' class='section_1' value="0.25" required> 

    <input type='radio' name='q_2' class='section_1' value="1" required> 
    <input type='radio' name='q_2' class='section_1' value="0.75" required> 
    <input type='radio' name='q_2' class='section_1' value="0.5" required> 
    <input type='radio' name='q_2' class='section_1' value="0.25" required> 

    <input type='radio' name='q_3' class='section_1' value="1" required> 
    <input type='radio' name='q_3' class='section_1' value="0.75" required> 
    <input type='radio' name='q_3' class='section_1' value="0.5" required> 
    <input type='radio' name='q_3' class='section_1' value="0.25" required> 
    <input type="submit" value="Next" /> 
</form> 

Answer 3

收聽change事件的類以「selection_」開頭的類。

計算單選按鈕組（保存數組中的唯一名稱值）並檢查這些組中是否沒有選中的單選按鈕。

請注意，這應該適用於任何數量的單選按鈕（不必是3組4個按鈕）。

另一點是輸入必須只分配一個類。

$('[class^="selection_"][type="radio"]').on('change', function() { 
    var className = $(this).attr('class'); 

    // Hold the unique name values in 'names' array 
    var names = []; 
    $('[class^="selection_"][type="radio"]').each(function() { 
     var n = $(this).attr('name'); 
     if ($.inArray(n, names) == -1) { 
      names.push(n); 
     } 
    }); 

    // Check if there are any unchecked radio buttons for each name set 
    var unanswered = 0; 
    for (var nm in names) { 
     if (!$('.' + className + '[name="' + names[nm] + '"]').is(':checked')) { 
      unanswered++; 
     } 
    } 

    // If no unswered set exists, procceed to next set! 
    if (unanswered == 0) { 
     proceedToNextQuestionSet(); 
    } 
}); 

Answer 4

我從你的問題中瞭解到，我已經創建了this fiddle作爲答案。請檢查它。

$(function(){ 
 

 
$('input[type="radio"]').on('change',function(){ 
 

 
if($('input[type="radio"]:checked').length==3) 
 
{ 
 
//do something 
 
console.log("3 radio buttons are checked") 
 
} 
 

 

 
}) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='radio' name='q_1' class='section_1' value=1 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_1' class='section_1' value=0.25 required> 
 
<br> 
 
<input type='radio' name='q_2' class='section_1' value=1 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_2' class='section_1' value=0.25 required> 
 
<br> 
 
<input type='radio' name='q_3' class='section_1' value=1 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.75 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.5 required> 
 
<input type='radio' name='q_3' class='section_1' value=0.25 required>

Answer 5

q_1 
<input type='radio' name='q_1' class='section_1' value=1 required> 
<input type='radio' name='q_1' class='section_1' value=0.75 required> 
<input type='radio' name='q_1' class='section_1' value=0.5 required> 
<input type='radio' name='q_1' class='section_1' value=0.25 required> 
</br> 
q_2 
<input type='radio' name='q_2' class='section_1' value=1 required> 
<input type='radio' name='q_2' class='section_1' value=0.75 required> 
<input type='radio' name='q_2' class='section_1' value=0.5 required> 
<input type='radio' name='q_2' class='section_1' value=0.25 required> 
</br> 
q_3 
<input type='radio' name='q_3' class='section_1' value=1 required> 
<input type='radio' name='q_3' class='section_1' value=0.75 required> 
<input type='radio' name='q_3' class='section_1' value=0.5 required> 
<input type='radio' name='q_3' class='section_1' value=0.25 required> 

<button id="btn_check"> submit 
</button> 

的JavaScript

$("#btn_check").click(function(){ 
var q1_ans = $("input[name='q_1']:checked").val(); 
var q2_ans = $("input[name='q_2']:checked").val(); 
var q3_ans = $("input[name='q_3']:checked").val(); 
if(q1_ans > 0 && q2_ans > 0 && q3_ans> 0){ 
alert("move on to next steps") 
}else{ 
alert("please complete all question"); 
} 
}); 

jsfiddle.net