<!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; 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; 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>