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 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
详解webpack 入门与解析
Apr 09 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
通过javascript实现段落的收缩与展开
Jun 26 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
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python的词法分析与语法分析
2013/05/18 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python实现员工管理系统
2018/01/11 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python redis存入字典序列化存储教程
2020/07/16 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
活动总结怎么写啊
2014/05/07 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书