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

最新推荐文章于 2023-05-09 14:34:19 发布
VIP文章 最新推荐文章于 2023-05-09 14:34:19 发布
阅读量5.1k 收藏 3
点赞数
分类专栏： html+js 文章标签： radioinputadd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windvally/article/details/50906914
版权

实现选择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
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS实现radio单选的同时，可以自定义输入值
爱玲姐姐的博客
11-21 1445
效果图： css .radio { background-color: white; border-color: gray; color: gray; border-style: solid; border-width: thin; text-align...
select、radio选中某一项后,自动弹出一个相应文本框供输入
dby124的博客
11-11 9801
1、select，弹出相应文本框说明：当select选中值改为else，其值为“-1”时，显示一个自定义的输入框，若要将自定义的项加入到select的数据项中，需在后台将自定义项存入对应的数据表中，这样，在刷新后，下一次访问这个select时，该自定义项就会出出现在select的选项中。项目的技术成果发布表单中的就有该功能的应用。js： function chg(obj) {
JS实现的radio图片选择按钮效果
01-19
用JS实现的radio图片选择按钮效果。注意：input后面的空格。用到的图片： 用JS实现的radio图片选择按钮效果-软件开发网 .lanrentuku img{border:1px solid #008800;} 用JS实现的radio图片选择按钮效果。 注意：input后面的空格。 查找更多代码，请访问：软件开发网 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js点击不同radio得到不同的input里面的onclick以便实现不同的处理跳转【原创】
非典型程序员
12-11 517
这个是要改变不同处理流程的input &lt;input name=btnG id = btnG type=submit value="查询缴费" onclick=""/&gt; 以下是不同的radio供选择： &lt;input id=all type=radio name=type value="phone" checked onClick="showphone()"/&gt; &amp
html实现radio按钮选中后显示输入框和提示
windvally的专栏
03-15 1万+
如果内心深处恐惧ＪＳ的话，以下是很简单实用的方法： onclick="document.getElementById('gmwp').style.display='';document.getElementById('label').style.display='' " />有       onclick="document.getElementById('gmwp').style
html redio 选择事件,Radio选项选中触发事件弹出输入框效果
weixin_42565402的博客
06-05 868
有的时候需要radio选项被选中后触发一系列的事件显示想要显示的东西，选中不同的选项触发不同的事件，下面介绍利用JS弹出不同的文本框效果。代码如下：function s1(va) {if(va=="0"){document.getElementById('a').style.display='block';document.getElementById('b').style.display='no...
uview中根据后台数据绑定radio单选框
m0_57948069的博客
05-09 1668
今天需要做一个单选框，然后单选框上的显示文本需要是后台传输过来的，由于之前只是后端，前端写的很少，而且经过了解后发现uview时uniapp的一个UI，也就是移动端的组件，是我从来没接触过的组件，所以上手组件就花了一个上午，不过好在下午就做出来了这个功能。:name中的item.后面的名字一定要改成实体类中的名字，否则就会拿不到数据！(ps.其实主要是因为这个忘记改了才浪费许多时间)我这个数组中拿到的是两个实体类，后台代码就不展示了。根据需要的进行删改；
jQuery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
weixin_33744854的博客
08-27 1944
有时候会遇到这么一个很简单的功能： jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏 html代码： &lt;div&gt; &lt;input type="radio" name="rd" class="same" value='选项二' &gt;选项一 &lt;input type="radio" name="rd" cl
实现radio单选框控制输入框的隐藏与出现
traysine的专栏
04-07 4244
scrip代码部分 function check(checkedRadio)     {    checkedRadio.checked=true; if(checkedRadio.value=='1'){ document.all.myInput.style.display = ''; } else if(checkedRadio.value=='2'){ docu
点击不同单选按钮出现不同内容
热门推荐
qq_33205354的博客
05-12 1万+
就我个人来说，我要实现的东西是，审核某个东西，如果通过则不需要填写理由，如果审核不通过则需要填写理由，出现一个文本域&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="js/jquery.min
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下： 1.单选：radio 实例： js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, ...
jQuery实现一个自定义的单选按钮radio
03-17
jQuery实现一个自定义的单选按钮radio
jQuery获取Radio,CheckBox选择的Value值(示例代码)
01-21
//选择被选中Radio的Value值$(“#text_id”).focus(function(){//code…}); //事件 当对象text_id获取焦点时触发$(“#text_id”).blur(function(){//code…}); //事件 当对象text_id失去焦点时触发$(“#text_id”)....
js操作radio单选框改变事件 点击radio执行相应操作(一般的可以)
勤快的小蚂蚁的博客
12-13 7499
我们经常看到一些点击选择特效：下拉框或者单选框，选择了不同的值，页面会进行相应的改变，这就是利用了change事件。今天总结的是radio单选框改变事件的原理。 要实现这样的效果，就要获取相应点击事件对应的改变。先看下一个简单的radio表单结构： <div class="layui-form-item"> <label class="layui-form-label"...
jquery js radio单选框取值和赋值
叶落无痕的博客
10-04 9038
今天下午遇到的坑，天大的坑啊，表单clear后，radio赋值无效。去除clear后却可。我用的以下方法尝试，都失败。最终问了项目经理，用末尾方法实现了。 以下方法 //取radio的值 $("input[name='radioName'][checked]").val(); //给radio 赋值, 选中值为2的radio： $("input[name='radioName'][value=2]").attr("checked",true); 官方的方法是这
js选中一个radio时增加一个条目
u012891324的专栏
06-03 880
友情链接类型文字图片 友情链接名称 友情链接地址http://开头 -->                         HeaderStyle-CssClass="ta">                                                                                                  
Js操作input的radio
wangqiuchen_Study的专栏
04-29 812
Js设置radio的input选中 document.getElementById("rad_Chart").checked= true; JS获取radio的input是否选中
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
weixin_34083807的博客
05-31 506
layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。实现效果：HTML代码：获取选中行数据设置选中行layui.use('table', function () {var table = layui.table; 19 20 ajaxSend(false, 'http://data.app.local/api/test/hello', '', funct...
文本框失去焦点后js判断输入是否为数字
windvally的专栏
04-12 6973
文本框失去焦点后js判断输入是否为数字 function ischeckNum() { var num = document.getElementById('isnum').value; if( num ) { if( !isNaN( num ) ) { alert('是数字'); return false; } else { alert('你输入的数据不是数字');
用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 implements ActionListener { private JRadioButton radio; private JTextField textField1, textField2; public RadioButtonDemo() { setTitle("单选按钮监听"); setSize(300, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 创建单选按钮 radio = new JRadioButton("点击我"); // 创建两个文本框 textField1 = new JTextField(); textField2 = new JTextField(); // 设置单选按钮的监听器 radio.addActionListener(this); // 将组件添加到窗口中 JPanel panel = new JPanel(new GridLayout(3, 2)); panel.add(new JLabel("选项：")); panel.add(radio); panel.add(new JLabel("文本框1：")); panel.add(textField1); panel.add(new JLabel("文本框2：")); panel.add(textField2); panel.setVisible(false); add(panel); setVisible(true); } @Override public void actionPerformed(ActionEvent e) { // 如果单选按钮被选中，显示两个文本框 if (radio.isSelected()) { JPanel panel = (JPanel) getContentPane().getComponent(0); panel.setVisible(true); } // 监听两个文本框的内容变化 textField1.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { System.out.println("文本框1的内容为：" + textField1.getText()); } }); textField2.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { System.out.println("文本框2的内容为：" + textField2.getText()); } }); } public static void main(String[] args) { new RadioButtonDemo(); } } ``` 运行程序后，会弹出一个窗口，其中包含一个单选按钮和两个文本框。点击单选按钮后，文本框会显示出来。在文本框中输入内容后，控制台会输出相应的内容。注意，这里只是一个简单的示例，实际应用中可能需要根据具体需求进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值