如何遍历获取页面中未选择的单选按钮的父元素
有这样一段代码
<div class='answerlist'><span>本题答案：</span><ul >
<li><input name='Q1' type='radio' value='1'/>A</li>
<li><input name='Q1' type='radio' value='2'/>B</li>
<li><input name='Q1' type='radio' value='3'/>C</li>
<li><input name='Q1' type='radio' value='4'/>D</li></ul>
<div class='answerlist'><span>本题答案：</span><ul >
<li><input name='Q2' type='radio' value='1'/>A</li>
<li><input name='Q2' type='radio' value='2'/>B</li>
<li><input name='Q2' type='radio' value='3'/>C</li>
<li><input name='Q2' type='radio' value='4'/>D</li></ul>
<div class='answerlist'><span>本题答案：</span><ul >
<li><input name='Q3' type='radio' value='1'/>A</li>
<li><input name='Q3' type='radio' value='2'/>B</li>
<li><input name='Q3' type='radio' value='3'/>C</li>
<li><input name='Q3' type='radio' value='4'/>D</li></ul>
<button type='submit' />
现在点击button后，我想把没有选择的题目列出来，比如我第一题做了，二三两题没有做，那我想把二三两题的div加一个CSS ‘noanswer’，红线虚框，以未提醒
请问需要怎么选择？谢谢
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .noanswer{ border:2px solid red; } </style> <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function test() { $(".answerlist").each(function () { var $radios = $(this).find(":radio"); var hasNoAnsw = $radios.length > 0 && $radios.filter(":checked").length == 0; $(this).toggleClass("noanswer", hasNoAnsw); }); } </script></head><body id="bd"> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q1' type='radio' value='1' />A</li> <li> <input name='Q1' type='radio' value='2' />B</li> <li> <input name='Q1' type='radio' value='3' />C</li> <li> <input name='Q1' type='radio' value='4' />D</li> </ul> </div> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q2' type='radio' value='1' />A</li> <li> <input name='Q2' type='radio' value='2' />B</li> <li> <input name='Q2' type='radio' value='3' />C</li> <li> <input name='Q2' type='radio' value='4' />D</li> </ul> </div> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q3' type='radio' value='1' />A</li> <li> <input name='Q3' type='radio' value='2' />B</li> <li> <input name='Q3' type='radio' value='3' />C</li> <li> <input name='Q3' type='radio' value='4' />D</li> </ul> </div> <input id="btnSubmit" type='submit' onclick="test()" value="没有答的加红框" /></body></html>
[解决办法]
1楼正解，是用jquery的
修改下：
<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
改为：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> //加载线上的jquery库，lz可另行下载jquery库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .noanswer{ border:2px solid red; } </style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> function test() { $(".answerlist").each(function () { var $radios = $(this).find(":radio"); var hasNoAnsw = $radios.length > 0 && $radios.filter(":checked").length == 0; $(this).toggleClass("noanswer", hasNoAnsw); }); } </script></head><body id="bd"> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q1' type='radio' value='1' />A</li> <li> <input name='Q1' type='radio' value='2' />B</li> <li> <input name='Q1' type='radio' value='3' />C</li> <li> <input name='Q1' type='radio' value='4' />D</li> </ul> </div> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q2' type='radio' value='1' />A</li> <li> <input name='Q2' type='radio' value='2' />B</li> <li> <input name='Q2' type='radio' value='3' />C</li> <li> <input name='Q2' type='radio' value='4' />D</li> </ul> </div> <div class='answerlist'> <span>本题答案：</span> <ul> <li> <input name='Q3' type='radio' value='1' />A</li> <li> <input name='Q3' type='radio' value='2' />B</li> <li> <input name='Q3' type='radio' value='3' />C</li> <li> <input name='Q3' type='radio' value='4' />D</li> </ul> </div> <input id="btnSubmit" type='submit' onclick="test()" value="没有答的加红框" /></body></html>