这个功能怎么实现

 //求一个js实现的功能
body中如下代码，想实现这样一个功能：选择每道题后，点击查看按钮，判断f,s中哪个div里的得分最多，使下面相应的div显示。 <body> 
<div id="f"> 
第一题 
<input type="radio" name="radiof1" value="1" />1分 
<input type="radio" name="radiof1" value="0" />0分<br /> 
第二题 
<input type="radio" name="radiof2" value="1" />1分 
<input type="radio" name="radiof2" value="0" />0分 
</div><br /> 
<div id="s"> 
第一题 
<input type="radio" name="radios1" value="1" />1分 
<input type="radio" name="radios1" value="0" />0分<br /> 
第二题 
<input type="radio" name="radios2" value="1" />1分 
<input type="radio" name="radios2" value="0" />0分 
</div> 
<input type="button" value="查看"/> <div id="one" style="display:none"> 
f层得分最多 
</div> 
<div id="two" style="display:none"> 
s层得分最多 
</div> </body> 
//asker:www.yuanshi88.com

解决方案 »

  1.   

    <!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=gb2312" />
    <title></title><script  src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script>
    $(function(){
    $('input:button').click(function(){
    var correct_f_count=$('#f>input:radio[checked][value!=0]').size();
    var correct_s_count=$('#s>input:radio[checked][value!=0]').size();

    $('#one').html("f层总共答对"+correct_f_count+"题").show()
    $('#two').html("s层总共答对"+correct_s_count+"题").show()
    })
    })</script></head><body>
     <div id="f"> 
    第一题 
    <input type="radio" name="radiof1" value="1" />1分 
    <input type="radio" name="radiof1" value="0" />0分<br /> 
    第二题 
    <input type="radio" name="radiof2" value="1" />1分 
    <input type="radio" name="radiof2" value="0" />0分 
    </div><br /> 
    <div id="s"> 
    第一题 
    <input type="radio" name="radios1" value="1" />1分 
    <input type="radio" name="radios1" value="0" />0分<br /> 
    第二题 
    <input type="radio" name="radios2" value="1" />1分 
    <input type="radio" name="radios2" value="0" />0分 
    </div> 
    <input type="button" value="查看"/> <div id="one" style="display:none"> 
    f层得分最多 
    </div> 
    <div id="two" style="display:none"> 
    s层得分最多 
    </div> 
    </body>
    </html>
    实际应用中不可能把value=1暴露在前端，应该交由后台判断然后返回结果
      

  2.   


    <html>
    <head>
    <title> A Timed Slide show</title></head>
    <body>  
    <div id="f">  
    第一题  
    <input type="radio" name="radiof1" value="1" />1分  
    <input type="radio" name="radiof1" value="0" />0分<br />  
    第二题  
    <input type="radio" name="radiof2" value="1" />1分  
    <input type="radio" name="radiof2" value="0" />0分  
    </div><br />  
    <div id="s">  
    第一题  
    <input type="radio" name="radios1" value="1" />1分  
    <input type="radio" name="radios1" value="0" />0分<br />  
    第二题  
    <input type="radio" name="radios2" value="1" />1分  
    <input type="radio" name="radios2" value="0" />0分  
    </div>  
    <input type="button" value="查看" onclick="check()"/>  <div id="one" style="display:none">  
    f层得分最多  
    </div>  
    <div id="two" style="display:none">  
    s层得分最多  
    </div>  
    <div id="three" style="display:none">  
    s和f层得分一样多  
    </div>  
    <script type="text/javascript">function check(){
       var inputs=document.getElementsByTagName("input");
       var s=0;
       var f=0;
       for(var i=0;i<4;i++){
       if(inputs[i].checked){s=s+parseInt(inputs[i].value);}
          }
     for(;i<9;i++){
       if(inputs[i].checked){f=f+parseInt(inputs[i].value);}
         }
       if(s>f){document.getElementById("two").style.display="none";document.getElementById("one").style.display="block";}
       else if(s<f){document.getElementById("one").style.display="none";document.getElementById("two").style.display="block";}
       else{document.getElementById("one").style.display="none";document.getElementById("two").style.display="none";document.getElementById("three").style.display="block";}
    }</script>
    </body>