JavaScript实现点击单选按钮改变输入框中文本域内容的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法。分享给大家供大家参考。具体如下:

这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习。

运行效果截图如下:

JavaScript实现点击单选按钮改变输入框中文本域内容的方法

具体代码如下:

<html>
<head>
<title>JavaScript点击单选框改变输入框内容</title>
</head>
<body>
<script language=JavaScript>
var defaultValue = ""
function Changes() {
var defaultValue = "changed";
}
ie = document.all?1:0
ns4 = document.layers?1:0
var c = 1
function hideIt(id) {
if (ie) {
document.all[id].style.zIndex = c--; 
document.all[id].style.visibility = "hidden";
document.all['hider'].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c--;
document.layers[cat].layers[id].visibility = "hide";
document.layers[cat].layers['hider'].visibility = "show";
} 
}
function showIt(id) {
if (ie) {
document.all[id].style.zIndex = c++; 
document.all[id].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c++;
document.layers[cat].layers[id].visibility = "show";
}
else {
document.getElementById(id).style.zIndex = c++; 
document.getElementById(id).style.visibility = "visible"; 
} 
}
function imgLbl(tab) {
premier = frmWc.elements[tab - 1];
if (premier.checked == 1) {
premier.checked = 0;
} else {
premier.checked = 1;
}
}
</script>
<FORM name=protectForm action="" method=post >
  <TABLE width=560>
  <TR>
 <TD>
  <TABLE cellPadding=2>
  <TR align=left>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'off');return true" type=radio value=0 
  name=Level checked>
  ASP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'low');return true" type=radio 
  value=25 name=Level>
  PHP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'high');return true" type=radio value=75 name=Level>
  JSP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'excl');return true" type=radio 
  value=100 name=Level>
  AJAX</TD>
  </TR></TABLE></TD></TR></TABLE>
  <table cellspacing=1 cellpadding=0 width=562 border="0" bgcolor="7285CF" height="240">
  <tr> 
  <td colspan=3 height="145" valign="top" bgcolor="F2F2F2"> 
  <div id=off style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560" border="0">
  <tr> 
  <td width="560">ASP是一种微软发明的WEB动态编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=low 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 2; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr >
  <td width="1237">PHP是一种开源、免费平台通用型WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=high 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr>JSP是SUN公司制造的基于JAVA的WEB编程容器,也是一种WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=excl 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr> 
  <td width="953">AJAX是一种WEB交互型框架语言,可以很好的提升用户体验。</td>
  </tr>
 </table>
 </div> 
 </td>
 </tr>
 </table>
 <TABLE cellSpacing=0 cellPadding=0 width=560>
  <TR>
  <TD align=right height="30"> 
  <INPUT class=bottom type=submit value=" 确定 "> 
  <INPUT class=bottom type=button value=" 取消 " name="Button"> 
 </TD></TR></TABLE>
 </FORM>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
javascript封装简单实现方法
Aug 11 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Maps Javascript
2007/01/22 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
基于vue实现分页效果
2017/11/06 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
运动会100米解说词
2014/01/23 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
导游个人求职信
2014/04/25 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
部门2015年度工作总结
2015/04/29 职场文书
高二数学教学反思
2016/02/18 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js