I have a list of radiobox select questions that I need to validate.
<ul>
<li>
<div class="question">Question1
<ul id="choice11">
<li><input type=radio name="choice1" value="1" /> </li>
<li><input type=radio name="choice1" value="2" /> </li>
<li><input type=radio name="choice1" value="2" /> </li>
</ul>
</div>
</li>
<li>
<div class="question">Question2
<ul id="choice">
<li><input type=radio name="choice2" value="1" /> </li>
<li><input type=radio name="choice2" value="2" /> </li>
<li><input type=radio name="choice2" value="3" /> </li>
</ul>
</div>
</li>
<li>
<div class="question">Question3
<ul id="choice3">
<li><input type=radio name="choice3" value="1" /> </li>
<li><input type=radio name="choice3" value="2" /> </li>
<li><input type=radio name="choice3" value="3" /> </li>
</ul>
</div>
</li>
</ul>
I want to validate and attach a class called "highlight" to ONLY the div which holds the question that has not been answered. The way I have it set up now it will highlight all the questions when I try to submit a form with only one or two non-selected options. I am having trouble iterating through the questions and selecting only those questions that are unanswered and call this jquery statement.
$("li .question").addClass('highlight');
$('.question').filter(function () {
return ! $(this).find('input:checked').length;
}).addClass('highlight');
Here's the fiddle: http://jsfiddle.net/XTDre/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.