实现选择radio按钮后添加一个文本输入框的示例

最新推荐文章于 2023-05-10 19:50:57 发布
最新推荐文章于 2023-05-10 19:50:57 发布
阅读量5.2k 收藏 3
点赞数
分类专栏： html+js 文章标签： radioinputadd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windvally/article/details/50906914
版权
这篇博客展示了如何在用户选中radio按钮后，动态地添加一个文本输入框。通过HTML和JavaScript实现，当用户勾选特定的radio选项时，会显示一个用于输入的文本框。
摘要由CSDN通过智能技术生成

实现选择radio按钮后添加一个文本输入框：


<input type="radio"  name="c_guomin"   value="yes" style="align: bottom;margin-left:20pt;margin-right:10pt"

οnclick="document.getElementById('gmwp').style.display='';document.getElementById('label').style.display='' " />有      
<input type="radio"  name="c_guomin"   value="no" style="align: bottom;margin-left:20pt;margin-right:10pt" 
οnclick="document.getElementById('gmwp').style.display='none';document.getElementById('label').style.display='none';
document.getElementById('gmwp').value=''"/>没有


<div style="font-family:microsoft yahei;font-size:22pt;padding-left:50pt;padding-top:10pt;color:#4F4F4F">
最低0.47元/天 解锁文章
windvally
关注
专栏目录
html实现radio按钮选中后显示输入框和提示
windvally的专栏
03-15 1万+
如果内心深处恐惧ＪＳ的话，以下是很简单实用的方法： onclick="document.getElementById('gmwp').style.display='';document.getElementById('label').style.display='' " />有       onclick="document.getElementById('gmwp').style
select、radio选中某一项后,自动弹出一个相应文本框供输入
热门推荐
dby124的博客
11-11 1万+
1、select，弹出相应文本框说明：当select选中值改为else，其值为“-1”时，显示一个自定义的输入框，若要将自定义的项加入到select的数据项中，需在后台将自定义项存入对应的数据表中，这样，在刷新后，下一次访问这个select时，该自定义项就会出出现在select的选项中。项目的技术成果发布表单中的就有该功能的应用。js： function chg(obj) {
html redio 选择事件,Radio选项选中触发事件弹出输入框效果
weixin_42565402的博客
06-05 920
有的时候需要radio选项被选中后触发一系列的事件显示想要显示的东西，选中不同的选项触发不同的事件，下面介绍利用JS弹出不同的文本框效果。代码如下：function s1(va) {if(va=="0"){document.getElementById('a').style.display='block';document.getElementById('b').style.display='no...
jQuery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
weixin_33744854的博客
08-27 1985
有时候会遇到这么一个很简单的功能： jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏 html代码： &lt;div&gt; &lt;input type="radio" name="rd" class="same" value='选项二' &gt;选项一 &lt;input type="radio" name="rd" cl
jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
cangdu的专栏
01-04 4370
html代码： 选项一 选项二 其它 jquery代码： $(function(){ $(".same").click(function(){ $(this).siblings().attr("checked",false); $(this).attr("checked",true);
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
10-22
在这个例子中，我们看到每个`<div class="input-group">`包含了两个部分：一个`.input-group-addon`，通常用来放置辅助元素（如复选框、单选按钮等），以及一个`.form-control`，用于输入文本。 为了实现动态添加和...
用java.swing设计一个单选按钮，点击后可以跳出两个文本输入框，并对其进行监视
最新发布
06-11
好的，以下是一个简单的实现： ```java import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class RadioButtonDemo extends JFrame ...
完成一个表单，要求有文本输入框、单选按钮、多选按钮、下拉列表、文本域、按钮，点击按钮后显示表单内容 要求：用v-model实现数据双向绑定
04-11
以下是一个示例代码，实现了多种表单元素的创建和数据双向绑定： 文本输入框: 单选按钮: <input type="radio" id="radio-1" value="1" v-model="radio"> <label for="radio-1">选项1 ...
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
10-16
首先，监听单选框状态的改变事件是前端开发中常见的功能，用户在前端页面上选择不同的单选按钮时，需要通过JavaScript来捕捉这一行为，并执行相应的逻辑处理。比如，在用户完成性别选择后，根据所选单选按钮的值弹出...
一个用radio控制的输入框
迷失在爪哇世界中的专栏
04-25 1914
第一种方法：   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){
实现radio单选框控制输入框的隐藏与出现
traysine的专栏
04-07 4340
scrip代码部分 function check(checkedRadio)     {    checkedRadio.checked=true; if(checkedRadio.value=='1'){ document.all.myInput.style.display = ''; } else if(checkedRadio.value=='2'){ docu
radio选择不同显示内容
weixin_33701294的博客
09-20 607
脚本说明: 把如下代码加入<body>区域中 <script language=JavaScript> var defaultValue = "" function Changes() { var defaultValue = "changed"; } ie = document.all?1:0 ns4 = document.layers?1:0 va...
jQuery单选框radio点击选择，判断input填写框是否显示
vicky_yongqi的博客
11-06 796
例子 单选框radio（不用name和value做判断判断条件）。 点击“其他”时候，后面的input填写框显示。 点击“中国大陆”，后面input填写框不显示。 代码 html代码，默认选择“中国大陆”。 <div class="a"> <div> 注册地域： </div> <div> <label><input class="AreaLan"
html input radio样式修改,利用CSS 修改input=radio的默认样式(改成选择框)
weixin_34392923的博客
06-03 1416
html部分：abel for属性规定与表单元素绑定radio单选框， 相同的name名字可以达到互斥的作用CSS部分：input[type="radio"] {opacity:; //设置透明度，隐藏原有input样式}label {position: absolute;left: 90%;top: 10px;width: 20px;height: 20px;border: 1px solid ...
el-radio单选前提示验证
weixin_46194350的博客
05-10 802
el-radio单选前提示验证
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
weixin_34083807的博客
05-31 549
layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。实现效果：HTML代码：获取选中行数据设置选中行layui.use('table', function () {var table = layui.table; 19 20 ajaxSend(false, 'http://data.app.local/api/test/hello', '', funct...
uview中根据后台数据绑定radio单选框
m0_57948069的博客
05-09 2420
今天需要做一个单选框，然后单选框上的显示文本需要是后台传输过来的，由于之前只是后端，前端写的很少，而且经过了解后发现uview时uniapp的一个UI，也就是移动端的组件，是我从来没接触过的组件，所以上手组件就花了一个上午，不过好在下午就做出来了这个功能。:name中的item.后面的名字一定要改成实体类中的名字，否则就会拿不到数据！(ps.其实主要是因为这个忘记改了才浪费许多时间)我这个数组中拿到的是两个实体类，后台代码就不展示了。根据需要的进行删改；
单选框选中时对应输入框可输入
TWenYuan的博客
12-02 2225
单选框选中时对应输入框可输入 首先在el-radio-group绑定v-model，再设置每个单选框的el-radio的label值，再绑定el-input的：disabled，表示当form的model不等于绑定的radio的label值时为true,可输入，否则一直禁止。 <el-form-item label="路径工作方式"> <el-radio-group v-model="form.mode"> <el-radio lab
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值