一个用radio控制的输入框

最新推荐文章于 2023-02-27 22:17:40 发布
最新推荐文章于 2023-02-27 22:17:40 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： javaScript 文章标签： input javascript function table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcom/article/details/362671
版权

第一种方法：

<html>
 <script language="javascript">
  function changeType()
  {
    if(document.all.radio[0].checked){
     document.all.text2.style.display='none';
     document.all.text1.style.display='';
    }
    if(document.all.radio[1].checked){
     document.all.text1.style.display="none";
     document.all.text2.style.display='';
    }
  }
 </script>
<body>
<input type="radio" name="radio" onFocus="changeType()" checked>
<input type="radio" name="radio" onFocus="changeType()"><br>
<input type="text" name="text1" value="text1">
<input type="text" name="text2" value="text2" style="display:none">
</body>
</html>

第二种方法

<script language="javascript">
function show1()
      {
        document.all.Display1.style.display='';
        document.all.Display2.style.display='none';
        //return;
      }

  function show2()
      {
        document.all.Display1.style.display='none';
        document.all.Display2.style.display='';
        //return;
      }
</script>
   <tr>
     <td height="20"></td>
  <td colspan="2" align="right"><input type="radio" id="RegistType1" name="UserType" value="" onFocus="show1();" checked>XXX</td>
  <td align="left"><input type="radio" id="RegistType2" name="UserType" value="" onFocus="show2();">XXX</td>
  <td></td>
   </tr>
   <tr>
     <td height="20"></td>
     <td colspan="3">
     <span id="Display1" name="Display1" style="display:''">
   <table width="100%">
        <tr>
          <td height="15"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td height="11"></td>
          <td></td>
          <td></td>
        </tr>
       <tr>
         <td></td>
         <td align="right">XXX：<input type="text" name="" width="150"></td>
         <td></td>
       </tr>
   </table>
      </span>
      <span id="Display2" name="Display2" style="display:none">
   <table width="100%">
        <tr>
          <td></td>
          <td align="right">XXX：<input type="text" name="" width="150"></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td align="right">XXX： <input type="text" name="" width="150"></td>
          <td></td>
        </tr>
   </table>
      </span>

hcom
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select、radio选中某一项后,自动弹出一个相应文本框供输入
dby124的博客
11-11 9777
1、select，弹出相应文本框说明：当select选中值改为else，其值为“-1”时，显示一个自定义的输入框，若要将自定义的项加入到select的数据项中，需在后台将自定义项存入对应的数据表中，这样，在刷新后，下一次访问这个select时，该自定义项就会出出现在select的选项中。项目的技术成果发布表单中的就有该功能的应用。js： function chg(obj) {
Radio按钮限制文本输入框
weixin_44550096的博客
07-08 1140
开发工具与关键技术：vs jquery 作者：黄海峰 撰写时间：2019.07.07 我通过两个单选框按钮来控制input文本框是否能输入数据，在这两个radio按钮中分别给true值和false值，然后当我们选中false值的按钮时，我们就限制文本框让他变成只读的状态，选中true值的radio按钮时，文本框就可以输入数据。 < input type=“radio” name=“ifS...
radio与输入框绑定，不选中输入框变暗不可填写
qq_45234274的博客
12-14 397
环境:react 框架：antdui 使用组件 Radio.Group 以及时间选择器 效果图：按年和按月日只能选择一个，没有选中的后面的输入框变成不可填写的效果 代码： 思想就是，先给radio一个value值，进行三元运算判断，让后面的输入框什么的禁用就可以啦 拜拜~ ...
radio后面带input框，低版本火狐需要多次点击input框才能获取输入焦点
m0_37780367的博客
11-06 432
<input type='radio' name='rule' value='1' id = 'somerule'/> <label for='somerule'> 每 <input type='text' style='width: 150px; height: 30px; display: inline;' class='form-control' id='n...
详解Bootstrap的iCheck插件checkbox和radio
11-23
iCheck 特色： 1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统 4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5、体积小巧 — gzip压缩后只有1 kb 6、25 种参数 用来定制复选框（checkbox）和单选按钮（radio button） 7、8 个回调事件 用来监听输入框的状态 8、7个方法 用来通过编程方式控制输入框的状态 9、能够将输入框的状态变化同步回原始输入框中， 支持所有选择器 使用方法： $(‘inp
input单选框和复选框改变自带的颜色和背景色
huihui_999的博客
02-27 3390
改变原生单选框及复选框选中颜色
js动态设置单选输入框(radio)选中状态
热门推荐
I_recluse的博客
07-26 1万+
有时需要在js中动态控制单选输入框的选中状态，这一般有两种方法： 1.通过设置input单选输入框的元素属性“checked”为“checked”，但需要注意的是，要把上一次设置的“checked”属性去掉，不然再次点击同一个元素的时候，选中状态就会错误。 2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。 下面通过一个例子来说明两种方法，这个例...
html redio 选择事件,Radio选项选中触发事件弹出输入框效果
weixin_42565402的博客
06-05 864
有的时候需要radio选项被选中后触发一系列的事件显示想要显示的东西，选中不同的选项触发不同的事件，下面介绍利用JS弹出不同的文本框效果。代码如下：function s1(va) {if(va=="0"){document.getElementById('a').style.display='block';document.getElementById('b').style.display='no...
element-ui中的radios按钮（带输入框）怎么做到取消的操作？
qq_36546490的博客
04-19 1609
需求：突然客户提了个需求，想在原来的系统上做一个这样的操作，就是可以取消选中的单选按钮，我当时心里想，( 你不要选不就完了吗？但是我不能这样说)。我就说下来看看可以做不。 查文档：查了一下radios的文档，发现它只绑定了change事件，如果想做点击取消的效果，肯定是用不了的，只能用click事件。就加上了试试看。首先是加了不起效果，需要添加native绑定原生事件，将radios的label值作为参数传递过去，如果点击的是同一个按钮，就在队列里面添加一个事件，等所有的同步事件处理完成之后，在处理异步的
html实现radio按钮选中后显示输入框和提示
windvally的专栏
03-15 1万+
如果内心深处恐惧ＪＳ的话，以下是很简单实用的方法： onclick="document.getElementById('gmwp').style.display='';document.getElementById('label').style.display='' " />有       onclick="document.getElementById('gmwp').style
下拉菜单选择其他时弹出文本框输入
11-11
下拉菜单选择其他时弹出文本框输入,这个很适合网站中的简历填写。
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 配置项 v-bind:disabled=...
解决layui的input独占一行的问题
12-09
1.input标签独占一行，与button标签无法同行显示 （使用position属性进行...（如果想让几个input同行，就把他们放在一个大的div里，大的div的class为layui-input-item，然后设置每个包含input的div的属性为layui-inlin
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
12-09
[removed] $(function(){ //输入框中文字颜色控制 $(“input:not(:last)”).css(“color”,”#999″); }); //用户名框鼠标焦点移进，文字消失 $(“input:first”).click(function () { var check1 = $(this).val();...
EXT教程EXT用大量的实例演示Ext实例
11-11
2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的，2.0稍微有些不同哦 2.4. 按顺序，咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字，图片...
jsp与javascript的结合在页面间传递参数[转]
迷失在爪哇世界中的专栏
04-23 1287
jsp与javascript结合用以处理confirm确认以达到传递参数到另一个页面的作用目的是从数据库取出一系列数据，在每一行结束有删除一项，但是删除的时候需要用户确认是否删除。首先我用了javascript来判断 function Myconfirm(id) {   if (confirm("是否确定删除该用户?"))    {      deleteUser(id)   } } 这样在调用j
玩透弹出窗口[转]
迷失在爪哇世界中的专栏
04-26 1167
【1、最基本的弹出窗口代码】  其实代码非常简单：    window.open (page.html)  -->    因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。  window.open (page.html) 用于控制弹出新的窗口page.html，如果pa
JavaScript 参考教程[转]
迷失在爪哇世界中的专栏
04-26 1039
文档对象现在我们将开始讨论更“实际”的话题——文档对象(DOM)。文档对象是指在网页文档里划分出来的对象。在 JavaScript 能够涉及的范围内有如下几个“大”对象：window, document, location, navigator, screen, history 等。下面是一个文档对象树，你可以看到对象下包含对象的“壮观”情景。要引用某个对象，就要把父级的对象都列出来。例如，要引用
输入框和单选框在同一行显示 elementUI
最新发布
05-26
首先，将输入框和单选框分别放在两个 `el-col` 组件中，然后将它们放在同一个 `el-row` 组件中。设置 `el-col` 的 `span` 属性来控制它们占据的列数，从而实现同一行显示的效果。 下面是一个示例代码： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值