DHTML( radio的综合使用---模拟网上的调查问卷)

最新推荐文章于 2016-07-25 02:05:53 发布

wangjian_an

最新推荐文章于 2016-07-25 02:05:53 发布

阅读量841

点赞数

分类专栏：网页制作 web前端知识文章标签： dhtml

本文链接：https://blog.csdn.net/wangjian_an/article/details/51713719

版权

web前端知识同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

网页制作

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>DHTML技术演示---radio的使用</title>
        <style type="text/css">
            #content{
                display:none;
            }
            ul{
                list-style:none;
            }
            ul li{
                margin:0px;
            }
            .close{
                display:none;
            }
            .open{
                display:block;
            }
        </style>

        <script type="text/javascript">
            function showContent(aNode){
                var oDivNode =document.getElementById("content");

                with(oDivNode.style){
                    if(aNode.value=="yes"){
                        display="block";
                    }else{
                        display="none";
                    }
                }
            }


            function showResult(){
                var oQuestionNode=document.getElementById("question");
                var oAllNodes=oQuestionNode.getElementsByTagName("input");
                var oRadioNodes=[];
                var k=0;
                for(var i=0;i<oAllNodes.length;i++){
                    if(oAllNodes[i].type=="radio"){
                        oRadioNodes[k++]=oAllNodes[i];
                        oAllNodes[i].onclick=function(){
                            init();
                        }
                    }
                }
                var val=0;//计得分
                var count=0;//计题目数
                for (var i = 0; i < oRadioNodes.length; i++) {
                    if(oRadioNodes[i].checked){
                        val+=parseInt(oRadioNodes[i].value);
                        count++;
                    }
                }
                var oErrorInfoNode=document.getElementById("erroinfo");
                if(val==0||count<2){
                    oErrorInfoNode.innerHTML="请选择所有选项！".fontcolor("red");
                    return;
                }
                oErrorInfoNode.innerHTML="";
                document.getElementById("res1").className="close";
                document.getElementById("res2").className="close";
                document.getElementById("res3").className="close";
                if(val<6){
                    document.getElementById("res1").className="open";
                }else if(val<8){
                    document.getElementById("res2").className="open";
                }else{
                    document.getElementById("res3").className="open";
                }
            }

            function init(){
                document.getElementById("res1").className="close";
                document.getElementById("res2").className="close";
                document.getElementById("res3").className="close";
            }
        </script>
  </head>

  <body >
    <div>
        <caption>问卷调查表</caption><br>
        <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="content">
        问卷调查内容:<br/>
        姓名:<input type="text"/><br/>
        电话:<input type="text" /><br/>
    </div>

    <hr/>
    <h2>欢迎来到性格测试</h2>
    <span>1：你喜欢的水果是:</span>
    <div id="question">
        <ul id="no1Id">
            <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>2:你喜欢的运动是</div>
        <ul id="no2Id">
            <li><input type="radio"  name ="no2" value="1" />篮球</li>
            <li><input type="radio"  name ="no2" value="2"  />足球</li>
            <li><input type="radio"  name ="no2" value="3" />羽毛球</li>
            <li><input type="radio"  name ="no2" value="4" />游泳</li>
            <li><input type="radio"  name ="no2" value="5" />运动</li>
        </ul>

    </div>
        <div>
            <input type="button" value="查看测试结果" onclick="showResult()">
            <span id="erroinfo"></span>
            <div id="res1" class="close">你的性格偏内向，建议....</div>
            <div id="res2" class="close">你的性格偏外向，建议....</div>
            <div id="res3" class="close">你的中性，建议....</div>
        </div>

  </body>
</html>

wangjian_an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML( radio的综合使用---模拟网上的调查问卷)

<!DOCTYPE html><html> <head> <title>DHTML技术演示---radio的使用</title> <style type="text/css"> #content{ display:none; } ul{
复制链接

扫一扫