日期:2014-05-16  浏览次数:20447 次

如何遍历获取页面中未选择的单选按钮的父元素
有这样一段代码

<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>