2010-08-24 6 views
17

Mehrere unabhängige Gruppen oder RadiobuttonsWie überprüft man, ob in jQuery ein Optionsfeld in jeder Gruppe aktiviert ist?

<h1>Question 1</h1> 
<input type="radio" name="radio1" value="false" /> 
<input type="radio" name="radio1" value="true" /> 

<h1>Question 2</h1> 
<input type="radio" name="radio2" value="false" /> 
<input type="radio" name="radio2" value="true" /> 

Wie kann ich in jQuery überprüfen, ob ein Optionsfeld in jeder Gruppe überprüft wird?

Vielen Dank.

Antwort

21

Hier ist, wie ich es tun würde:

var all_answered = true; 
$("input:radio").each(function(){ 
    var name = $(this).attr("name"); 
    if($("input:radio[name="+name+"]:checked").length == 0) 
    { 
    all_answered = false; 
    } 
}); 
alert(all_answered); 

Auf diese Weise brauchen Sie nicht auf Geschwister oder Eltern-Tags zu verlassen. Wenn Ihre Optionsfelder mit einem beliebigen Tag vermischt sind, funktioniert es trotzdem. Sie können .

+0

Ja, in der Tat die Radio-Buttons wurden mit anderen Tags gemischt. Aber deine Lösung hat funktioniert. Danke. – iHello

2

Sie könnten Schleife durch jede Frage (<h1>) und durch sie die Antworten zu suchen mit .nextUntil() mit .filter(), um zu sehen, ob es irgendwelche :checked diejenigen, wie folgt aus:

var noAns = $("h1").filter(function() { 
       return $(this).nextUntil("h1").filter(":checked").length == 0; 
      }); 

Dies würde alle Fragen zurückzukehren ohne Radio ausgewählt für sie, könnten Sie die .length davon überprüfen, ob Sie, wenn jede nicht sehen wollte Antworten haben, zum Beispiel:

if(noAns.length > 0) { 
    alert(noAns.length + " question(s) don't have answers!"); 
} 

You can give it a try here.


Sie können dies auch ein bisschen zum Beispiel erweitern die Fragen hervorheben, die verpasst wurden:

if(noAns.css({ color: "red" }).length > 0) { 

und verwenden $("h1").css({ color: "" }) es in die nächste Runde zu löschen, you can give it a try here.

1

Wrap jeder Funkgruppen mit einem form oder einem div:

<div id="question1"> 
    <h1>Question 1</h1> 
    <input type="radio" name="radio1" value="false" /> 
    <input type="radio" name="radio1" value="true" /> 
</div> 

<div id="question2"> 
    <h1>Question 2</h1> 
    <input type="radio" name="radio2" value="false" /> 
    <input type="radio" name="radio2" value="true" /> 
</div> 

dann in jQuery:

if ($('#question1 input[type=radio]:checked')[0] != undefined && $('#question2 input[type=radio]:checked')[0] != undefined) { 
    ... 
} 
0

upvoted ich die Antwort von "GG". Sie müssen den HTML-Code jedoch nicht ändern.

Wählen Sie einfach von [name] (die eindeutig sein sollte):

if ($("input[name='radio1']:checked")[0] != undefined && 
    $("input[name='radio2']:checked")[0] != undefined) { 
    ... 
}