js操作单选框radio

来源：互联网发布：淘宝天猫属于b2b吗编辑：程序博客网时间：2024/06/06 02:40

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GBK">
       <title>Untitled Document</title>
       <style type="text/css">
           #contentid{
               display:none;
           }

           #no1ul{
               list-style:none;
               margin:0px;
           }

           .close{
               display:none;
           }
           .open{
               display:block;
           }
       </style>


       <script type="text/javascript">
           function showResult(){
               //1,判断是否有答案被选中。
               //获取所有no1的radio。并遍历判断checked状态。
               var oNo1Nodes = document.getElementsByName("no1");
               var flag = false;
               var val;
               for(var x=0; x<oNo1Nodes.length; x++){
                   if(oNo1Nodes[x].checked){
                       flag = true;

                       val = oNo1Nodes[x].value;
                       break;
                   }

               }
               if(!flag){
//                   alert("")
                   document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red");
                   return;
               }


               if(val>=1 && val<=3){
                   document.getElementById("res_1").className = "open";
                   document.getElementById("res_2").className = "close";
               }
               else{
                   document.getElementById("res_1").className = "close";
                   document.getElementById("res_2").className = "open";

               }


           }
       </script>
   </head>
   <body>
       

               

               <h2>欢迎您参与性格测试：</h2>
               <div>
                   <h3>第一题：</h3>
                   <span>您喜欢的水果是什么？</span>
                   <ul id="no1ul">
                   <li><input type="radio" name="no1" value="1" />葡萄</li>
                   <li><input type="radio" name="no1" value="2" />西瓜</li>
                   <li><input type="radio" name="no1" value="3" />苹果</li>
                   <li><input type="radio" name="no1" value="4" />芒果</li>
                   <li><input type="radio" name="no1" value="5" />樱桃</li>
                   </ul>
               </div>
               <div>
               <input type="button" value="查看测试结果" onclick="showResult()" />
               <span id="errinfo"></span>
               <div id="res_1" class="close">1-3分：你的性格内向并扭曲，建议...</div>
               <div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
               </div>







   <hr/>
       <script type="text/javascript">
           function showContent(node){

               var oDivNode = document.getElementById("contentid");
               with(oDivNode.style){
                   if(node.value=='yes'){
                       display = "block";
                   }else{
                       display = "none";

                   }
               }

           }
       </script>
       
       <div>
       您要参与问卷调查吗：
       <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
       <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
       </div>
       <div id="contentid">
       问卷调查内容：<BR/>
       您的姓名：<input type="text" /><br>
       您的邮箱：<input type="text" />
       </div>



   </body>
</html>

0 0