JavaScript 点击单选按钮改变输入框（文本域）的内容

最新推荐文章于 2022-10-19 17:03:42 发布
最新推荐文章于 2022-10-19 17:03:42 发布
阅读量4.9k 收藏 1
点赞数
分类专栏： web前端


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


<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=ok.asp  method=post >
                    <TABLE width=560>
                      
                      <TR>
                <TD>
                  <TABLE cellPadding=2>
                   
                    <TR align=left>
                      <TD vAlign=top align=left>
                    <INPUT
                        οnclick="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
                        οnclick="showIt(  'low');return true" type=radio
                        value=25 name=Level>
                                PHP</TD>
                      <TD align=left width=20>  </TD>
                      <TD vAlign=top align=left>
                    <INPUT
                        οnclick="showIt(  'high');return true" type=radio value=75 name=Level>
                                JSP</TD>
                      <TD align=left width=20>  </TD>
                      <TD vAlign=top align=left><INPUT
                        οnclick="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>

效果图

一谦的视界
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
10-23
主要介绍了JavaScript实现点击单选按钮改变输入框中文本域内容的方法,涉及javascript单选按钮控制页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
html 点击文本框则选中,JS事件 内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
weixin_31220971的博客
06-03 1475
内容选中事件(onselect)选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。运行结果：任务补充右边编辑器第13行，当选中个人简介文本框中文字时，触发onselect事件，并弹出对话框。 内容选中事件 function message(){alert(...
下拉选框多次选择同一个选项_关于选择菜单的“套路”
weixin_39786706的博客
12-04 486
上期文章中对搜索功能进行了拆解和细化，本期继续探讨一下单选框、下拉选择框等这一类选择菜单的使用方法。在使用工具型产品时，我们经常能够遇到各式各样的组件，列表、下拉框、按钮、搜索等，这些组件的使用并不是随随便便摆放的，都有一定的原理和规范可循，今天就来聊一聊关于“选择菜单”的那些套路。选择菜单主要分为三类：开关、单选/多选框、下拉列表。（这里我将单选框和复选框归为一类）一、开关使用场景：开关适用于具...
word应用2（实用）
无限大地NLP_空木的专栏
05-21 3291
1、快速改变Word文档的行距 选中你需要设置行距的文本段落，按“Ctrl+ 1”的组合键，即可将段落设置成单倍行距；按“Ctrl+ 2”的组合键，即可将段落设置成双倍行距；按“Ctrl+5”的组合键，即可将段落设置成1.5倍行距。 2、去除页眉的横线 在页眉插入信息的时候经常会在下面出现一条横线，如果不想在页眉留下任何信息也无法自动去除此横线。这时可以采用下述的方法去掉： 1.确认插入点
input单选框改变选择
qq_35181466的博客
08-08 3195
html页面： &lt;input type="radio" name="numerical" value="price" /&gt; 值 &lt;input type="radio" name="numerical" value="scope" /&gt; 范围 js页面： $('input[type=radio][name=numerical]'
2.2 点击按钮改变文本框中的文字内容
weixin_30387799的博客
03-04 2470
功能：点击第一个按钮生成文字，第二个按钮清除文字 事件：onclick 属性：input的value <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><t...
html中文本框改变事件,JavaScript onchange 事件：表单文本域或选择域发生改变
weixin_39789101的博客
06-03 316
JavaScript onchange 事件表单文本域或选择域发生改变时会触发 onchange 事件。支持该事件的 HTML 标签, , 支持该事件的 JavaScript 对象fileUpload, select, text, textareaonchange 实例下面的例子演示了 select 下拉选择列表，当列表内无合适选择项而让用户自定义选择项的效果：function checkAre...
javascript实现点击单选按钮链接转向对应网址的方法
10-23
主要介绍了javascript实现点击单选按钮链接转向对应网址的方法,涉及javascript鼠标事件及页面跳转的相关技巧,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
js简单实现表单中点击按钮动态增加输入框数量的方法
10-23
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
HTML第二天学习总结—— 表单
weixin_52819925的博客
07-27 486
为什么需要表单 使用表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。 表单的组成 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。 表单域 表单域是一个包含表单元素的区域。 在 HTML 标签中， <form>标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器。 <form action=“url地址” method=“提交
点击标签给文本域（Textarea）赋值，文本域支持手动输入
zw19940808的博客
10-19 1182
点击标签给文本域（Textarea）赋值，文本域支持手动输入
在C#窗体程序实例学习中以最笨的方式学，慢慢学（四）-----按下按钮后文本框变换文本
HEIMENGER的博客
03-22 690
该程序由一个文本框和一个按钮组成，运行程序时文本框显示“欢迎光临红浪漫”单击按钮后，文本框中的文本变为“感谢您的消费” 一、步骤 1.创建Windows窗体应用程序 2.创建用户界面，效果如下图1所示。控件属性如下表1所示。 图1表示整体效果图。图2图3图4表示在哪里更改可以出现这样的效果图 图2 图3 图4 表1 控件 属性 值 说明 Form1 Text 红浪漫会所 窗体标题栏文本 Textbox1 Text 欢迎光临红浪漫 输出文本框文本 Button1 Text OK 命令
JS获取/修改文本框输入的内容value，修改div标签中的内容：innerHTML、innerTest
m0_53881899的博客
08-31 1939
JS获取/修改文本框输入的内容value，修改div标签中的内容：innerHTML、innerTest
JavaScript单选框选择操作
P7295的博客
05-16 6383
废话不多说来看原图： 当点击全选按钮的时候，项目复选框全高亮，反之字面意思 反选则为当前勾选项目取消，无勾选项目则被勾选。 步骤 一.写入html内容 input type属性值要改为"checkbox"单选框。 二.写入JavaScript实现功能 在button按钮属性值里设置各自id， 在JavaScript中通过文档获取到该id， 绑定点击事件，for循环遍历所有单选框， 遍历的数组集通过改变属性值的布尔值来显示高亮效果。 反选按钮需要做一个有效的判断来确定...
javascript 根据单选框的值，来决定页面显示的方法
design321的专栏
01-28 1250
var oRadios = document.getElementById('selectradio').getElementsByTagName('input');             for( var i = 0, len = oRadios.length; i                  oRadios[i].onclick = function(){
大、小断层矿井小波SVM融合智能故障预测matlab代码.zip
最新发布
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
layui单选按钮不同按钮显示输入框不同
05-19
2. 在 JavaScript 中监听单选按钮的变化，根据选中的按钮显示对应的输入框： ```javascript // layui表单组件 var form = layui.form; // 监听单选按钮的变化 form.on('radio(option)', function(data){ // 隐藏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值