当所有具有特定类的单选按钮被检查时，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