怎么遍历获取页面中未选择的单选按钮的父元素
日期：2014-05-16 浏览次数：20559 次
如何遍历获取页面中未选择的单选按钮的父元素
有这样一段代码
<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’，红线虚框，以未提醒
请问需要怎么选择？谢谢
------解决方案--------------------
有这样一段代码
<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’，红线虚框，以未提醒
请问需要怎么选择？谢谢
------解决方案--------------------
- JScript code
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
