jQuery eine Aktion ausführen, wenn alle Radiobuttons mit einer bestimmten Klasse überprüft wurden

Question

Ich muss eine Fragevorlage entwickeln, die 3 Fragen auf der Seite gleichzeitig lädt. Wenn die 3 Fragen alle beantwortet wurden (mit ihren Radiobuttons ausgewählt), geht es weiter zum nächsten Abschnitt. Hier ist der Code für die Eingänge:

<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>

ich sicherstellen möchten, dass, sobald ein Radiobutton mit dem Namen ‚Q_1‘, ‚Q_2‘ und ‚Q_3‘ aus ‚section_1‘ ausgewählt haben, wir bewegen zu Abschnitt zwei. Wie würde ich dieses Problem mit einem einfachen jQuery-Code lösen?

Answer 1

Sie müssen die Änderungsereignis verwenden:

• Sie :radio selector

• $ verwenden (': radio [name^= "q _"] section_1.') Wählen Sie alle Radios mit Klasse section_1 und name beginnend mit q_ (also, in Ihrem Fall, q_1, q_2 und q_3).

• change Ereignis, weil:

  ... Radio-Buttons, wird das Ereignis sofort ausgelöst, wenn der Benutzer eine Auswahl trifft ....

• Test, wenn alle Funkgeräte überprüft werden: $ (': radio [name^= "q _"] section_1. checked') Länge == 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

denke ich, kein Problem in Ihrem Code aber nur eine Sache betrachten, html5 „erforderlich“ funktioniert nur in über IE8 Attribute.

Sie können http://caniuse.com/ Website für überprüfen html5 Attribute arbeiten auf welchem ​​Browser.

Bitte überprüfen Sie Ihren Code mit dem untenstehenden Code.

<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

anhören change Ereignis auf Elemente mit Klasse, die mit „selection_“ beginnt.

Zählen Sie die Optionsfeldsätze (halten Sie die eindeutigen Namenwerte in einem Array) und überprüfen Sie, ob eines dieser Sets kein Optionsfeld aktiviert hat.

Beachten Sie, dass dies mit einer beliebigen Anzahl von Optionsfeldern funktionieren kann (müssen nicht 3 Sätze mit 4 Schaltflächen sein).

Ein weiterer Punkt ist, dass den Eingängen nur eine Klasse zugewiesen sein muss.

$('[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

Was ich aus Ihrer Frage verstanden habe, habe ich this fiddle als Antwort erstellt. Bitte überprüfen Sie es.

$(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