<!doctype html>body {margin:0; padding:0; Font-family: ' Microsoft Ya Black ';} 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:10px0;} 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 (){ varOform1 = document.getElementById (' Form1 ')), Oform2= document.getElementById (' Form2 '); Oshowbox1= document.getElementById (' Showbox1 '); Oshowbox2= document.getElementById (' Showbox2 '); functiongetchecked (form,name) {arr= []; for(vari = 0; i < form[name].length; i++ ) { if(form[name][i].checked = =true) {Arr.push (Form[name][i].value)}}if(Form[name][0].type = = ' Radio ') { returnArr[0]; } if(Form[name][0].type = = ' checkbox ') { returnarr; } }; for(vari = 0; i < oform1.income.length; i++) {Oform1.income[i].onclick=function() {Showbox1.style.display= ' Block '; Showbox1.innerhtml= ' Your income now is: ' + getchecked (oform1, ' income ')); } } for(vari = 0; i < oform2.character.length; i++) {Oform2.character[i].onclick=function() {Showbox2.style.display= ' Block '; Showbox2.innerhtml= ' Your income now is: ' + getchecked (oform2, ' character '). Join ('); }} Oform1.onreset=function () { varRe = confirm (' Are you sure you want to reset it? ‘); if(re) {Showbox1.style.display= ' None '; return true; } Else { return false; }} Oform2.onreset=function () { varRe = confirm (' Are you sure you want to reset it? ‘); if(re) {Showbox2.style.display= ' None '; return true; } Else { return false; } } }</script>more than 20000 yuan<div id= "Showbox1" ></div> <input type= "reset" name= "reset" value= "reset" > </form> <fo RM id= "Form2" > <label> your character is:</label> <input type= "checkbox" name= "character" value= "cheerful" ;Cheerful<br> <input type= "checkbox" name= "character" value= "random" >Effortless<br> <input type= "checkbox" name= "character" value= "gloomy" >Gloomy<br> <input type= "checkbox" name= "character" value= "decisive" >Decisive<br> <input type= "checkbox" name= "character" value= "cool" >Calm down<br> <input type= "checkbox" name= "character" value= "unrestrained" >unrestrained<br> <input type= "checkbox" name= "character" value= "restrained" >restrained<br> <input type= "checkbox" name= "character" value= "steady" >sedate<div id= "Showbox2" ></div> <input type= "reset" name= "reset" value= "reset" > </form></body& Gt;Dom encapsulates form controls