问题:
table里面的tr结构是这样的,一个tr表示一道问卷的题目<tr>
<td>
<strong>6、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
</ul>
</td>  
</tr>需要用JavaScript(原生或者jQuery都行)实现以下算法和功能:
页面中有很多个这样的tr,每一个表示一道题目,我在正确答案的li上挂了一个名为right的class类,用于表示其为题目的正确答案,当我把整份问卷填写完成后:
1、首先判断用户是否选择完里面的所有题目了,如果没有则弹出提示框提示用户第几道题没有选择,并且阻止表单的提交
2、如果用户都选择完毕了,则开始计算分数,选择正确的每题5分,最终根据总分弹出一个层(这个我可以自己弄)向用户显示信息,例如:
0~40分弹出“称号1”
40~60分弹出“称号2”
60~80分弹出“称号3”
80~100分弹出“称号4”要求:以上的tr结构不能变,不过可以挂class类或者id
我的js实在很弱,求大神帮忙实现一下算法和程序我可以学习!javascript算法jquery编程

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
    test测试1
    </title>
    </head>
    <body>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <table>
    <tbody id="topics">
    <tr>
        <td>
            <strong>1、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n1" id="r11"><label for="r11">正确</label></li>
                <li><input type="radio" name="n1" id="r12"><label for="r12">错误</label></li>
            </ul>
        </td>  
    </tr>
    <tr>
        <td>
            <strong>2、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n2" id="r21"><label for="r21">正确</label></li>
                <li><input type="radio" name="n2" id="r22"><label for="r22">错误</label></li>
            </ul>
        </td>  
    </tr>
    <tr>
        <td>
            <strong>3、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n3" id="r31"><label for="r31">正确</label></li>
                <li><input type="radio" name="n3" id="r32"><label for="r32">错误</label></li>
            </ul>
        </td>  
    </tr>
    </tbody>
    </table>
    <button id="OK">OK</button>
    <script>
    $(document).ready(function(){
        $('#OK').click(function(){
         var right = 0 , todo = true;
         $('#topics').children().each(function(index){
         var obj = $(':radio[name=n'+ (index+1) +']:checked' , $(this));
         if(obj.val()){
         if(obj.parent().hasClass('right')){
         ++right;
         }
         }else{
         alert('第'+ (index + 1) +'题目没有做');
         todo = false;
         }
         });
         var totalScore = right * 5;
         if(totalScore>=0&&totalScore<40){
         alert('称号一');
         }else if(totalScore>=40&&totalScore<60){
         alert('称号二');
         }else if(totalScore>=60&&totalScore<80){
         alert('称号三');
         }else if(totalScore>=80&&totalScore<=100){
         alert('称号四');
         }
         if(todo){
         //表单提交
         }
        });
    });
    </script>
    </html>
      

  2.   

    <script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
    <script>
        function check() {
            var ok = true, input, score = 0;
            $('#tb tr').each(function (idx) {
                input = $(this).find('input');
                if (!input[0].checked && !input[1].checked) { alert('第' + (idx + 1) + '题没做!'); ok = false; return false; }
                if (input.filter(':checked').parent().attr('class') == 'right') score += 5;
            });
            if (ok) {
                alert('总分:'+score);
                if (score >= 0 && score < 40) alert('称号1');
                else if (score >= 40 && score < 60) alert('称号2');
                else if (score >= 60 && score < 80) alert('称号3');
                else if (score >= 80 && score <= 100) alert('称号4');
            }
            return false;
        }
    </script>
    <form  onsubmit="return check(this)">
    <table id="tb"><tr>
        <td>
            <strong>1、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n1"><label for="r1">正确</label></li>
                <li><input type="radio" name="n1"><label for="r2">错误</label></li>
            </ul>
        </td>  
    </tr><tr>
        <td>
            <strong>2、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n2"><label for="r1">正确</label></li>
                <li><input type="radio" name="n2"><label for="r2">错误</label></li>
            </ul>
        </td>  
    </tr>
    <tr>
        <td>
            <strong>3、正确还是错误?</strong>
            <ul>
                <li class="right"><input type="radio" name="n3"><label for="r1">正确</label></li>
                <li><input type="radio" name="n3"><label for="r2">错误</label></li>
            </ul>
        </td>  
    </tr></table><input type="submit" value="提交" /></form>
      

  3.   


    <form id="form1">
            <table id="questions">
                <tr>
                    <td>
                        <strong>1、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>2、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n2" id="Radio1"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n2" id="Radio2"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>3、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n3" id="Radio3"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n3" id="Radio4"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
            </table>
            <button id="submit" type="button">提交</button>
        </form>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            var questionCount = $("#questions tr").length;
            document.getElementById("form1").onsubmit = function () {
                var nums = [];
                $("#questions tr").each(function (i, obj) {
                    if ($(obj).find(":radio:checked").length == 0) {
                        nums.push(i + 1);
                    }
                });
                if (nums.length > 0) {
                    alert("第" + nums.join(",") + "题没有选择");
                    return false;
                }
            }        $("#submit").unbind("click").bind("click", function () {
                var nums = $("#questions li.right :radio:checked").length;
                var score = nums * 5;
                if (score < 40) {
                    alert("称号1");
                }
                else if (score >= 40 && score < 60) {
                    alert("称号2");
                }
                else if (score >= 60 && score < 80) {
                    alert("称号3");
                } else {
                    alert("称号4");
                }
            });
        </script>
      

  4.   

    刚那个有点bug.<form id="form1">
            <table id="questions">
                <tr>
                    <td>
                        <strong>1、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>2、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n2" id="Radio1"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n2" id="Radio2"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>3、正确还是错误?</strong>
                        <ul>
                            <li class="right"><input type="radio" name="n3" id="Radio3"><label for="r1">正确</label></li>
                            <li><input type="radio" name="n3" id="Radio4"><label for="r2">错误</label></li>
                        </ul>
                    </td>
                </tr>
            </table>
            <button id="submit" type="submit">提交</button>
        </form>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            var questionCount = $("#questions tr").length;
            document.getElementById("form1").onsubmit = function () {
                var nums = [];
                $("#questions tr").each(function (i, obj) {
                    if ($(obj).find(":radio:checked").length == 0) {
                        nums.push(i + 1);
                    }
                });
                if (nums.length > 0) {
                    alert("第" + nums.join(",") + "题没有选择");
                }
                return false;
            }        $("#submit").unbind("click").bind("click", function () {
                var nums = $("#questions li.right :radio:checked").length;
                var score = nums * 5;
                if (score < 40) {
                    alert("称号1");
                }
                else if (score >= 40 && score < 60) {
                    alert("称号2");
                }
                else if (score >= 60 && score < 80) {
                    alert("称号3");
                } else {
                    alert("称号4");
                }
            });
        </script>
      

  5.   

    <script type="text/javascript">
    function check() {
    var ans = document.getElementsByTagName('table')[0].getElementsByTagName('input'), countQ = ans.length / 2;
    var array = new Array(), total = 0;
    for (var i = 0, len = ans.length; i < len; i++) {
    if (ans[i].checked) {
    ans[i].idx = Math.floor(i / 2) + 1;
    array.push(ans[i]);
    }
    }
    if (array.length < countQ) {
    var _no = ',';
    for (var i = 1; i <= countQ; i++) {
    _no += i + ',';
    }
    for (var i = 0, len = array.length; i < len; i++) {
    _no = _no.replace(',' + array[i].idx + ',', ',');
    }
    _no = _no.substr(1).substr(0, _no.length - 2);
    alert('你有以下题目未完成:\n' + _no + '\n请完成后再提交.谢谢!');
    return false;
    }
    for (var i = 0, len = array.length; i < len; i++) {
    if (array[i].parentNode.className == 'right') total++;
    }
    alert('称号' + (total < 8 ? 1 : (d = Math.floor(total / 4)) > 4 ? 4 : d));
    return false;
    }
    </script>
    发一个javascript版的
      

  6.   

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    table{background-color:#6FC;}
     td{width:200px; text-align:center; height:100px; font-size:12px; color:#666;}
      td span{font-weight:900; color:#F00;}
    </style>
    <script type="text/javascript" src="js/Panli.js"></script>
    </head><body>
        <table>
        <tbody id="topics">
            <tr>
                <td>
                    <strong>1、正确还是错误?</strong>
                    <ul>
                        <li class="right"><input type="radio" name="n1" id="r11"><label for="r11">正确</label></li>
                        <li><input type="radio" name="n1" id="r12"><label for="r12">错误</label></li>
                    </ul>
                </td>  
            </tr>
            <tr>
                <td>
                    <strong>2、正确还是错误?</strong>
                    <ul>
                        <li class="right"><input type="radio" name="n2" id="r21"><label for="r21">正确</label></li>
                        <li><input type="radio" name="n2" id="r22"><label for="r22">错误</label></li>
                    </ul>
                </td>  
            </tr>
            <tr>
                <td>
                    <strong>3、正确还是错误?</strong>
                    <ul>
                        <li class="right"><input type="radio" name="n3" id="r31"><label for="r31">正确</label></li>
                        <li><input type="radio" name="n3" id="r32"><label for="r32">错误</label></li>
                    </ul>
                </td>  
            </tr>
        </tbody>
    </table>
        <input type="button" value="提交" onclick="return scores()"/>
    <script type="text/javascript">
     
        function scores() {
            var id = document.getElementById('topics'),
                ul = id.getElementsByTagName('ul'),
                score = 0;
            for (var i = 0; i < ul.length; i++) {
                var li = ul[i].getElementsByTagName('li'),
                    boo = true;
                for (var j = 0; j < li.length; j++) {
                    if (li[j].getElementsByTagName('input')[0].checked == true) {
                        boo = false;
                        li[j].className == 'right' ? score += 5 : '';
                    }
                };
                if (boo) {
                    alert('请填写第' + (i + 1) + '题');
                    return false;
                }
            }
            if (score >= 0 && score < 40) alert('称号一');
            if (score >=40 && score < 60) alert('称号二');
            if (score >=60 && score < 80) alert('称号三');
            if (score >= 80 && score < 100) alert('称号四');
            return true;
        }
        
    </script>
       
    </body>
    </html>