dom 封装表单控件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: '微软雅黑';
}
form {
    border: 1px solid #eee;
    border-radius: 10px;
    width: 600px;
    margin: 50px auto;
    padding: 20px;
    line-height: 28px;
    position: relative;
}
form label {
    display: block;
    font-weight: bold;
    padding: 10px 0;
}
form input {
    margin-left: -3px;
    margin-right: 5px;
}
#showbox1, #showbox2 {
    border: 1px solid #eee;
    width: 160px;
    position: absolute;
    right: 30px;
    top: 30px;
    background: #DEFEF3;
    padding: 20px;
    display: none;
}
input[type="reset"]{
    float: right;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
    var oform1 = document.getElementById('form1'),
        oform2 = document.getElementById('form2');
        oshowbox1 = document.getElementById('showbox1');
        oshowbox2 = document.getElementById('showbox2');

    function getchecked(form,name)
    {
        arr = [];
        for(var i = 0; i < form[name].length; i++ )
        {
            if(form[name][i].checked == true)
            {
                arr.push(form[name][i].value)
            }
        }
        if(form[name][0].type == 'radio')
        {
            return arr[0];
        }
        if(form[name][0].type == 'checkbox')
        {
            return arr;
        }
    };

    for(var i = 0; i < oform1.income.length; i++ )
    {
        oform1.income[i].onclick = function ()
        {
            showbox1.style.display = 'block';
            showbox1.innerHTML = '您现在得收入是：' + getchecked(oform1,'income');
        }
    }

    for(var i = 0; i < oform2.character.length; i++ )
    {
        oform2.character[i].onclick =function ()
        {
            showbox2.style.display = 'block';
            showbox2.innerHTML = '您现在得收入是：' + getchecked(oform2,'character').join(' ');
        }
    }
    oform1.onreset = function ()
    {
        var re = confirm ('你确定要重置吗？');
        if(re)
        {
            showbox1.style.display = 'none';
            return true;
        }
        else
        {
            return false;
        }
    }

    oform2.onreset = function ()
    {
        var re = confirm('你确定要重置吗？');
        if(re)
        {
            showbox2.style.display = 'none';
            return true;
        }
        else
        {
            return false;
        }
    }    

}
</script>
</head>

<body>
    <form id="form1">
        <label>您的月收入水平是：</label>
        <input type="radio" name="income" value="1000元以下">1000元以下<br/>
        <input type="radio" name="income" value="1000~3000元">1000~3000元<br/>
        <input type="radio" name="income" value="3000~5000元">3000~5000元<br/>
        <input type="radio" name="income" value="5000~10000元">5000~10000元<br/>
        <input type="radio" name="income" value="10000~20000元">10000~20000元<br/>
        <input type="radio" name="income" value="20000元以上">20000元以上
        <div id="showbox1"></div>
        <input type="reset" name="reset" value="重置">
    </form>
    <form id="form2">
        <label>您的性格是：</label>
        <input type="checkbox" name="character" value="开朗">开朗
        <br>
        <input type="checkbox" name="character" value="随性">随性
        <br>
        <input type="checkbox" name="character" value="阴郁">阴郁
        <br>
        <input type="checkbox" name="character" value="果断">果断
        <br>
        <input type="checkbox" name="character" value="冷静">冷静
        <br>
        <input type="checkbox" name="character" value="奔放">奔放
        <br>
        <input type="checkbox" name="character" value="内敛">内敛
        <br>
        <input type="checkbox" name="character" value="稳重">稳重
        <div id="showbox2"></div>
        <input type="reset" name="reset" value="重置">
    </form>
</body>
</html>