第四题 checkbox多选无法对应，请问是js部分哪里出了问题

悬赏园豆：10 [已解决问题] 解决于 2016-05-06 17:59

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试答题</title>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/questions.js"></script>
<style type="text/css">
*{ padding:0px; margin:0px;}
ul,li{ list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none; cursor:pointer;}
body{ line-height:1.5em;}
/*question*/
.ques{ width:300px; margin:0px auto; padding:10px; height:150px; overflow:hidden;}
.ques p{ font-weight:bold;}
.ques .ops{ padding:15px;}
.nextQues{   
    background: #9E9E9E;
    border: #666666;
    color: #fff;
    display: block;
    padding: 3px;
    text-align: center;
    font-weight: bold;
    width: 22%;
    float: right;
    margin-right: 10%;
    border-radius: 4px;
     }
.result{
    position: fixed;
    top: 82px;
    left: 40px;
    width: 77%;
    height: 39%;
    z-index: 99;
    background: rgba(0,0,0,0.7);
    display: none;
    border-radius: 15px;
}
.box {
    color: #fff;
    text-align: center;
    padding-top: 22%;
}
.btns {
    position: absolute;
    bottom: 19%;
    color: #fff;
    right: 5%;
    background: green;
    border-radius: 6px;
    padding: 4px;
    width: 60px;
    text-align: center;
    font-weight: 800;
}
.info {
    color: red;
    text-align: center;
    margin-top: 5%;
    display: none;
}
.checked {
 background-color:gray;
 font-weight:bold;
}
</style>
</head>
<body>

<div class="QBox">
    <div>
        <div class="ques1 ques">
            <p>1.你喜欢吃什么水果？</p>
            <!-- <ul id="ul2" value="radio">
                           <li value="1" name="t1">A.苹果</li>
                           <li value="2" name="t1">B.香蕉</li>
                           <li value="3" name="t1">C.葡萄</li>
                           <li value="4" name="t1">D.梨</li>
                         </ul> --> 
             <ul class="ops">
                <li><input type="radio" value="1" name="t1"/><span>A.苹果</span></li>
                <li><input type="radio" value="2" name="t1"/><label>B.香蕉</label></li>
                <li><input type="radio" value="3" name="t1"/><label>C.葡萄</label></li>
                <li><input type="radio" value="4" name="t1"/><label>D.梨</label></li>
            </ul>  
        </div>
    
        <div class="ques2 ques">
            <p>2.你最喜欢什么颜色？</p>
            <ul class="ops">
                <li><input type="radio" value="1" name="t2"/><label>A.蓝色</label></li>
                <li><input type="radio" value="2" name="t2"/><label>B.绿色</label></li>
                <li><input type="radio" value="3" name="t2"/><label>C.白色</label></li>
                <li><input type="radio" value="4" name="t2"/><label>D.紫色</label></li>
            </ul> 
        </div>
    
        <div class="ques3 ques">
            <p>3.你喜欢哪个城市？</p>
            <ul class="ops">
                <li><input type="radio" value="1" name="t3"/><label>A.北京</label></li>
                <li><input type="radio" value="2" name="t3"/><label>B.上海</label></li>
                <li><input type="radio" value="3" name="t3"/><label>C.深圳</label></li>
                <li><input type="radio" value="4" name="t3"/><label>D.厦门</label></li>
            </ul> 
        </div>
        
        <div class="ques4 ques">
            <p>4.你最喜欢做的事？</p>
            <ul class="ops">
                <li><input type="checkbox" value="1" name="t4" id="c1" /><label>A.看书</label></li>
                <li><input type="checkbox" value="2" name="t4" id="c2"/><label>B.听音乐</label></li>
                <li><input type="checkbox" value="3" name="t4" id="c3"/><label>C.旅行</label></li>
                <li><input type="checkbox" value="4" name="t4" id="c4"/><label>D.画画</label></li>
            </ul>  
            <!-- <ul id="ul1" value="checkbox">
                            <li value="1">A.看书</li>
                            <li value="2">B.听音乐</li>
                            <li value="3">C.旅行</li>
                            <li value="4">D.画画</li>
            </ul>   -->
        </div>
    
        <!-- <div class="ques4 ques">
            <p>4.你最喜欢做的事？</p>
            <ul class="ops">
                <li><input type="radio" value="1" name="t4"/><label>A.看书</label></li>
                <li><input type="radio" value="2" name="t4"/><label>B.听音乐</label></li>
                <li><input type="radio" value="3" name="t4"/><label>C.旅行</label></li>
                <li><input type="radio" value="4" name="t4"/><label>D.画画</label></li>
            </ul>  
        </div> -->
        
    </div>
    
    <a class="nextQues" >提交</a>
    <!-- 弹窗 -->
    <div class="result">
        <div class="box">恭喜你答对了</div>
        <p class="btns">继续</p>
    </div>
    <div class="info">请选择选项</div>

</div>
<script language="javascript">

/*$(document).ready(function() {
 var ul1_value = "";
 var ul2_value = "";
 //多选
 $("#ul1 li").click(function(){
  $(this).toggleClass("checked");

  $("#ul1 li[class='checked']").each(function(){
   ul1_value = ul1_value + "," + $(this).attr("value");
  });

  $("#ul1_value").val(ul1_value);
  ul1_value = "";
 });

 //单选
 $("#ul2 li").click(function(){
  $(this).toggleClass("checked");
  $("#ul2 li[value!='"+ $(this).attr("value")+"']").removeClass("checked");

  if($(this).attr("class")=="checked"){
   ul2_value = $(this).attr("value");
  }

  $("#ul2_value").val(ul2_value);
  ul2_value = "";
 });
});
*/
</script> 
</body>
</html>

// JavaScript Document    
$(function(){
    
    var i=0;
    var n=$('.ques').size();
    var lists=$('.ques');
    var myansewr=[];
    var trueanswer=new Array();
    var trueanswer=[1,2,3,4];
    //var trueanswer=['A','B','C','D'];
    lists.hide();
    lists.first().show();
    
    //提交按钮
    $('.nextQues').click(function(){
    var flag=0;
    if(i==0){
    var flag=0;
    var obj1=document.getElementsByName('t1');
    for(var k=0;k<obj1.length;k++){
        if(obj1[k].checked){
            flag=1;
            var a1=obj1[k].value;
            myansewr.push(k+1);
             if(a1.toString()==1){
            //alert("恭喜你答对了");
             $(".result").show(500);
                }else{
             $(".result").show(500);
             $(".box").html("很遗憾答错了,正确答案是A");
            //alert("很遗憾答错了,正确答案是A");
              }
            }
        }
    
        if( flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
           $(".btns").click(function  () {
             $(".result").hide();
        })
        }
    

    
    if(i==1){
    var flag=0;
    var obj2=document.getElementsByName('t2');
    for(var k=0;k<obj2.length;k++){
        if(obj2[k].checked){
            myansewr.push(k+1);
            var a2=obj2[k].value;
            //alert(obj2[k].value);
            if(a2.toString()==2){
                    $(".result").show(500);
                    }else{
                        $(".result").show(500);
                        $(".box").html("很遗憾答错了,正确答案是B"); 
                        }
            flag=1;
            }
        }
        
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
        }

    
    if(i==2){
    var flag=0;
    var obj3=document.getElementsByName('t3');
    for(var k=0;k<obj3.length;k++){
        if(obj3[k].checked){
            flag=1;
            var a3=obj3[k].value;
            myansewr.push(k+1);
            if(a3.toString()==3){
                     $(".result").show(500);
                }else{
                    $(".result").show(500);
                    $(".box").html("很遗憾答错了,正确答案是C");
                    }
            
            }
        }
        
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
        }
    
/*多选题*/

    if(i==n-1){
        var flag=0;
    //    var obj4=document.getElementById("c1");
    //    var obj5=document.getElementById("c4");
        var obj4=document.getElementsByName('t4');
    for(var k=0;k<obj4.length;k++){
        if(obj4[k].checked){
            var a4=obj4[k].value;
            
            if(a4.toString()==1 && a4.toString()==4){
                $(".result").show(500);
                }else{
                    $(".result").show(500);
                    $(".box").html("很遗憾答错了,正确答案是A、D"); 
                    }
            myansewr.push(k+1);
            flag=1;
            }
        }
    
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }


        $('.nextQues').text("完成");
        if($('.nextQues').text()=="完成"){
            $('.nextQues').click(function(){
                //alert("你的答案是："+myansewr);
                if(myansewr.toString()==trueanswer.toString()){
                    // $(".result").show();
                    }else{
                         $(".result").show();
                         $(".box").html("还需要继续努力哟!");  
                        }
                })
            }
        }
    
        
        i++;
        lists.eq(i).show();
        lists.eq(i).siblings().hide();
        function checkedTest(){
          var count = 0;
          var checkArry = document.getElementsByName("t4");
            for (var i = 0; i < checkArry.length; i++) { 
                if(checkArry[i].checked == true){
                    //选中的操作
                    count++; 
                }
            }
   /* if( count == 0 ){
        alert("请选择！")
    }*/
}
 
checkedTest();
        
    
    }) 
        })

像风一样自由~~~ | 初学一级 | 园豆：48
提问于：2016-05-06 15:56

< >

最佳答案

应该还可以改进。

$(function(){
    
    var i=0;
    var n=$('.ques').size();
    var lists=$('.ques');
    var myansewr=[];
    var annew=[];
    var trueanswer=new Array();
    var trueanswer=[1,2,3,4];
    //var trueanswer=['A','B','C','D'];
    lists.hide();
    lists.first().show();
    
    //提交按钮
    $('.nextQues').click(function(){
    var flag=0;
    if(i==0){
    var flag=0;
    var obj1=document.getElementsByName('t1');
    for(var k=0;k<obj1.length;k++){
        if(obj1[k].checked){
            var a1=obj1[k].value;
             if(a1.toString()==1){
                   myansewr.push(k+1);
                     flag=1;
            //alert("恭喜你答对了");
             $(".result").show(500);
             
                }else{
             $(".result").show(500);
             $(".box").html("很遗憾答错了,正确答案是A");
            //alert("很遗憾答错了,正确答案是A");
              }
            }
        }
        if( flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
           $(".btns").click(function  () {
             $(".result").hide();
        })
        }
    

    
    if(i==1){
    var flag=0;
    var obj2=document.getElementsByName('t2');
    for(var k=0;k<obj2.length;k++){
        if(obj2[k].checked){
            
            var a2=obj2[k].value;
            //alert(obj2[k].value);
            if(a2.toString()==2){
                myansewr.push(k+1);
                  flag=1;
                    $(".result").show(500);
                      
                    }else{
                        $(".result").show(500);
                        $(".box").html("很遗憾答错了,正确答案是B"); 
                        }
            }
        }
        
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
        }

    
    if(i==2){
    var flag=0;
    var obj3=document.getElementsByName('t3');
    for(var k=0;k<obj3.length;k++){
        if(obj3[k].checked){
            
            var a3=obj3[k].value;
            if(a3.toString()==3){
                 myansewr.push(k+1);
                flag=1;
                     $(".result").show(500);
                }else{
                    $(".result").show(500);
                    $(".box").html("很遗憾答错了,正确答案是C");
                    }
            
            }
        }
        
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }
        }
    
/*多选题*/

    if(i==n-1){
        var flag=0;
    //    var obj4=document.getElementById("c1");
    //    var obj5=document.getElementById("c4");
        var obj4=document.getElementsByName('t4');
        
    for(var k=0;k<obj4.length;k++){
        if(obj4[k].checked){
            
            var a4=obj4[k].value;
            annew.push(a4);
            //alert(a4);
            //if(a4.toString()==1 && a4.toString()==4){
             //   $(".result").show(500);
              //  }else{
                 //   $(".result").show(500);
                 //   $(".box").html("很遗憾答错了,正确答案是A、D"); 
                 //   }
          //  myansewr.push(k+1);
           // flag=1;
            }
   }
    if(annew.length>0 && annew.length==2){
            if(jQuery.inArray("1", annew)>=0&& jQuery.inArray("4", annew)>= 0){
                 flag=1;    
                   $(".result").show(500);
                    myansewr.push(4);
              }else{
                  $(".result").show(500);
                    $(".box").html("很遗憾答错了,正确答案是A、D"); 
                        annew.length=0;
                   }
           
        }    
    
        if(flag==0){
            i--;
            $('.info').show();
             setTimeout("$('.info').hide();",1500); 
            }


        $('.nextQues').text("完成");
        if($('.nextQues').text()=="完成"){
            $('.nextQues').click(function(){
                //alert("你的答案是："+myansewr);
                if(myansewr.length==trueanswer.length){
                    $(".box").html("恭喜全部答对!"); 
                    }else{
                         $(".result").show();
                         $(".box").html("还需要继续努力哟!");  
                        }
                })
            }
        }
    
        
        i++;
        lists.eq(i).show();
        lists.eq(i).siblings().hide();
        function checkedTest(){
          var count = 0;
          var checkArry = document.getElementsByName("t4");
            for (var i = 0; i < checkArry.length; i++) { 
                if(checkArry[i].checked == true){
                    //选中的操作
                    count++; 
                }
            }
   /* if( count == 0 ){
        alert("请选择！")
    }*/
}
 
checkedTest();
        
    
    }) 
        })

收获园豆：10

剧里局外 | 菜鸟二级 |园豆：203 | 2016-05-06 17:44

非常感谢，，我自己再完善

像风一样自由~~~ | 园豆：48 (初学一级) | 2016-05-06 17:59

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

第四题 checkbox多选无法对应，请问是js部分哪里出了问题

欢迎，请先登录或者注册。