在输入框边输入即可看到效果的代码如何实现？

<script>
//（1）姓名(文本框）：张先生
//（2）性别（单选）：男
//（3）兴趣爱好（多选）：体育/文学/摄影
//（4）省份（下拉菜单）：选北京
//（5）个人简介（多行文本）：本人是....
function f1()
{
  var str="";
  str="<br>姓名:"
  str=str+document.all.tex1.value;
   
  str=str+"<br>性别";
  str=str+((document.all.radio1.checked==true)?"男":"女");
  obj=document.g e t E l e m e n t s B y N a m e("cbhobbit");//去掉空格再运行
  str=str+"<br>爱好:"
  for(var i=0;i<obj.length;i++)
  {
    if(obj[i].checked)
    {
       str+=obj[i].parentNode.innerText;
    }
  }
  str=str+"<br>省份:"
  str=str+document.all.sel.options[document.all.sel.selectedIndex].text;
  str=str+"<br>个人简介";
  str=str+document.all.text.value;
  document.all.div1.innerHTML=str;
  
  
  
}
</script>
<body onload="">
<input type="button" onclick=f1() value="生成">
<table>
<tr>
<td>姓名</td>
<td><input type="text" id="tex1" value=""></td>
</tr>
</table>
<table><tr>
<td>性别</td>
<td width="100"><input type="radio" ID=radio1 name="cbsex" checked=true>男</td>
<td  width="100"><input type="radio" ID=radio2 name="cbsex">女</td>
</tr>
</table>
<table>
<tr>
<td>爱好</td>
<td width="150" ><input type="checkbox" name="cbhobbit" ID=Checkbox2>体育</td>
<td width="150"><input type="checkbox" name="cbhobbit" ID=Checkbox3 >文学</td>
<td width="150"><input type="checkbox" name="cbhobbit" ID=Checkbox1 >摄影</td>
</tr>
</table>
<table>
<tr>
<td>省份</td>
<td width="150" ><select id="sel"><option>北京</option><option>上海</option></select></td>
</tr>
</table>
个人简介
<textarea id="text">
本人...
</textarea>
<div id="div1"></div></body>

解决方案 »

  1.   

    <script>
    //（1）姓名(文本框）：张先生
    //（2）性别（单选）：男
    //（3）兴趣爱好（多选）：体育/文学/摄影
    //（4）省份（下拉菜单）：选北京
    //（5）个人简介（多行文本）：本人是....
    function f1()
    {
      var str="";
      str="<br/>姓名:"
      str=str+document.all.tex1.value;
       
      str=str+"<br/>性别";
      str=str+((document.all.radio1.checked==true)?"男":"女");
      obj=document.g et Elements ByName("cbhobbit");//去掉空格再运行
      str=str+"<br/>爱好:"
      for(var i=0;i<obj.length;i++)
      {
        if(obj[i].checked)
        {
           str+=obj[i].parentNode.innerText;
        }
      }
      str=str+"<br/>省份:"
      str=str+document.all.sel.options[document.all.sel.selectedIndex].text;
      str=str+"<br/>个人简介";
      str=str+document.all.text.value;
      document.all.div1.innerHTML=str;
      
        
    }
    </script>
    <body onload="">
    <table>
    <tr>
    <td>姓名</td>
    <td><input type="text" id="tex1" value="" onkeyup="f1();"></td>
    </tr>
    </table>
    <table><tr>
    <td>性别</td>
    <td width="100"><input type="radio" ID=radio1 name="cbsex" checked=true onclick="f1();">男</td>
    <td  width="100"><input type="radio" ID=radio2 name="cbsex" onclick="f1();">女</td>
    </tr>
    </table>
    <table>
    <tr>
    <td>爱好</td>
    <td width="150" ><input type="checkbox" name="cbhobbit" ID=Checkbox2 onclick="f1();">体育</td>
    <td width="150"><input type="checkbox" name="cbhobbit" ID=Checkbox3 onclick="f1();">文学</td>
    <td width="150"><input type="checkbox" name="cbhobbit" ID=Checkbox1 onclick="f1();" >摄影</td>
    </tr>
    </table>
    <table>
    <tr>
    <td>省份</td>
    <td width="150" ><select id="sel" onchange="f1();"><option>北京</option><option>上海</option></select></td>
    </tr>
    </table>
    个人简介
    <textarea id="text" onkeyup="f1();">
    本人...
    </textarea>
    <div id="div1"></div></body>