有这样一段代码
<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>
</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库
- HTML 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>
<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>