Radio选项选中触发事件弹出输入框效果
有的时候需要radio选项被选中后触发一系列的事件显示想要显示的东西,选中不同的选项触发不同的事件,下面介绍利用JS弹出不同的文本框效果。
代码如下:
<script language="javascript"> function s1(va) { if(va=="0"){ document.getElementById('a').style.display='block'; document.getElementById('b').style.display='none'; document.getElementById('c').style.display='none'; }else if(va="1"){ document.getElementById('b').style.display='block'; document.getElementById('a').style.display='none'; document.getElementById('c').style.display='none'; } } function s2(va) { if(va=="2"){ document.getElementById('c').style.display='block'; document.getElementById('a').style.display='block'; document.getElementById('b').style.display='block'; } } function s3(va) { if(va=="3"){ document.getElementById('a').style.display='none'; document.getElementById('b').style.display='none'; document.getElementById('c').style.display='none'; } } </script>
<input name="#" type="radio" value="0" onClick="s1(this.value)" />A <input name="#" type="radio" value="1" onClick="s1(this.value)" />B <input name="#" type="radio" value="2" onClick="s2(this.value)" />C <input name="#" type="radio" value="3" onClick="s3(this.value)" />D <p id="a" style="display:none;"><input type="text" name="" value="A"></p> <p id="b" style="display:none;"><input type="text" name="" value="B"></p> <p id="c" style="display:none;"><input type="text" name="" value="C"></p>
(资源库 www.zyku.net)
上一篇:返回列表
栏 目:JavaScript
下一篇:jquery 接收 json 格式数据 转化时间类型输出
本文标题:Radio选项选中触发事件弹出输入框效果
本文地址:https://www.zyku.net/js/234.html
您可能感兴趣的文章
- 03-22Layui radio点击事件实现input显示和隐藏的例子
- 06-26jquery 显示隐藏input输入框
- 11-20自适应选项卡切换微信支付宝二维码打赏模板
- 03-31JS解决移动web开发手机输入框弹出的问题
- 12-14HTML <textarea> 标签
- 09-11vivox70pro+机型颜色及配置介绍
- 07-08QQ看点背景图更换方法介绍
- 09-20抖音怎么删除收藏表情
- 01-12集团管控-集团管控应用软件功能介绍
- 07-31帝国cms 列表页用灵动标签怎么调用文
- 06-25Access-Control-Allow-Origin解决跨域
- 11-29OPPO手机怎么设置自拍镜像
- 11-08萤石云绑定多人步骤介绍
- 12-15CentOS找回root用户登录密码的方法
- 03-01oppoencoair设置双击耳机暂停方法
- 01-12健康之翼-健康之翼应用软件功能介绍
- 10-01天猫精灵音色在哪改
- 05-06小米手机还原数据操作方法
- 01-13dedecms列表页调用文章正文内容的方法
- 12-23HTML <dialog> 标签
最近更新
阅读排行
猜你喜欢
- 12-30荣耀智慧空间-荣耀智慧空间应用软件功
- 11-07苹果13如何取消背景音
- 02-14HTML5拖拉上传文件的简单实例_1
- 04-22opporeno5全景光效开启方法
- 12-31量子WiFi-量子WiFi应用软件功能介绍
- 12-31内科护理主管护师中级-内科护理主管护
- 03-24vivox60pro开启节日锁屏壁纸方法
- 12-22HTML <figcaption> 标签
- 07-15帝国CMS在JS调用登陆状态模板中调用会
- 11-24小米10怎么允许未知软件安装