当前位置: 代码迷 >> JavaScript >> js实现同时显示文本框及复选框的内容解决办法
  详细解决方案

js实现同时显示文本框及复选框的内容解决办法

热度:65   发布时间:2012-04-09 13:41:25.0
js实现同时显示文本框及复选框的内容
<script language="javascript" type="text/javascript">
function display() {
  DispWin = window.open("about:blank",'NewWin','toolbar = no,status = no,width = 300,heght = 200')
  for(var i = 0;i <= document.form1.selection.length;i ++) {
  if(document.form1.selection[i].checked) {
message1 = document.form1.selection[i].value + "</br>";
DispWin.document.write(message1);
}
  }
  message1 = document.form1.others.value;
  DispWin.document.write(message1);
}
</script>



<form name="form1">
请选择您的爱好:
<input type="checkbox" name="selection" value="打球" />打球
<input type="checkbox" name="selection" value="玩游戏" />玩游戏
<input type="checkbox" name="selection" value="上网" />上网
<input type="checkbox" name="selection" value="泡妞" />泡妞
<input type="checkbox" name="selection" value="踢球" />踢球  
其它:<input type="text" name="others" value="" on/><br />
<input type="button" value="显示" onclick="display();" /><br />
</form>

=========================
如以上代码所示,我是想实现用js里面的函数同时显示表单中复选框里面选择的内容以及文本框里面的内容,现在这段代码是可以显示复选框里面选择的内容,但是对于文本框里面的内容却无法显示,请问这是怎么回事呢?

------解决方案--------------------
HTML code

<script language="javascript" type="text/javascript" > 
function display() { 
   //DispWin = window.open("about:blank", 'NewWin ', 'toolbar = no,status = no,width = 300,heght = 200 ') 
   //根据测试,是上面那句写错了
   DispWin=window.open();
   for(var i = 0;i  < document.form1.selection.length;i ++) { 
      if(document.form1.selection[i].checked) { 
     message1 = document.form1.selection[i].value + " </br >"; 
     DispWin.document.write(message1); 
  } 
   } 
   message1 = document.all.form1.others.value; 
   DispWin.document.write(message1); 
} 
</script > 


<form name="form1" > 
请选择您的爱好: 
<input type="checkbox" name="selection" value="打球" / >打球 
<input type="checkbox" name="selection" value="玩游戏" / >玩游戏 
<input type="checkbox" name="selection" value="上网" / >上网 
<input type="checkbox" name="selection" value="泡妞" / >泡妞 
<input type="checkbox" name="selection" value="踢球" / >踢球   
其它: <input type="text" name="others" value="" / > <br / > 
<input type="button" value="显示" onclick="display();" / > <br / > 
</form >

------解决方案--------------------
HTML code

<script language="javascript" type="text/javascript"> 
function display() { 
   DispWin = window.open("",'NewWin','toolbar = no,status = no,width = 300,heght = 200') 
  // DispWin=window.open(); 
   message = "您的姓名是:" + document.form1.name.value + " <br/>"; 
   message += "您的籍贯是:" + document.form1.address.value + " <br/>";  
   DispWin.document.write(message); 
    
   message = "您的年龄是:"; 
   DispWin.document.write(message); 
    
   for ( var i = 0;i  < document.form1.age.length;i ++) { 
      if ( document.form1.age[i].checked ) { 
     message = document.form1.age[i].value + " <br/>"; 
 DispWin.document.write(message); 
  } 
   }  
    
   message = "您的爱好是:"; 
   DispWin.document.write(message); 
    
   for ( var i = 0;i  < document.form1.selection.length;i ++ ) { 
      if(document.form1.selection[i].checked) { 
     message = document.form1.selection[i].value + ","; 
     DispWin.document.write(message); 
  } 
   } 
   message = document.form1.others.value + "。"; 
   DispWin.document.write(message); 
} 
</script> 


<h1 align="center" >第三题 </h1> 
<form name="form1"> 
请输入您的姓名: 
<input type="text" name="name" value="" /> 
<br /> 
请输入您的籍贯: 
<input type="text" name="address" value="" /> 
<br /> 
请选择您的年龄: 
<input type="radio" name="age" value="小于18岁" />年龄小于18岁 
<input type="radio" name="age" value="大于等于18岁" />年龄大于等于18岁 
<br /> 
请选择您的爱好: 
<input type="checkbox" name="selection" value="打球" />打球 
<input type="checkbox" name="selection" value="玩游戏" />玩游戏 
<input type="checkbox" name="selection" value="上网" />上网 
<input type="checkbox" name="selection" value="泡妞" />泡妞 
<input type="checkbox" name="selection" value="踢球" />踢球   
其它: <input type="text" name="others" value="" /> <br /> 
<input type="reset" value="重填" /> 
<input type="button" value="显示" onclick="display();" /> <br /> 
</form> 
  相关解决方案