简体   繁体   中英

How to iterate through an unordered list and then select the parent div of the list item

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM