首页 > 代码库 > dom 封装表单控件
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="http://www.mamicode.com/1000元以下">1000元以下<br/> <input type="radio" name="income" value="http://www.mamicode.com/1000~3000元">1000~3000元<br/> <input type="radio" name="income" value="http://www.mamicode.com/3000~5000元">3000~5000元<br/> <input type="radio" name="income" value="http://www.mamicode.com/5000~10000元">5000~10000元<br/> <input type="radio" name="income" value="http://www.mamicode.com/10000~20000元">10000~20000元<br/> <input type="radio" name="income" value="http://www.mamicode.com/20000元以上">20000元以上 <div id="showbox1"></div> <input type="reset" name="reset" value="http://www.mamicode.com/重置"> </form> <form id="form2"> <label>您的性格是：</label> <input type="checkbox" name="character" value="http://www.mamicode.com/开朗">开朗 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/随性">随性 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/阴郁">阴郁 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/果断">果断 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/冷静">冷静 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/奔放">奔放 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/内敛">内敛 <br> <input type="checkbox" name="character" value="http://www.mamicode.com/稳重">稳重 <div id="showbox2"></div> <input type="reset" name="reset" value="http://www.mamicode.com/重置"> </form></body></html>
dom 封装表单控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。