html实现radio按钮选中后显示输入框和提示

最新推荐文章于 2023-05-10 19:50:57 发布
最新推荐文章于 2023-05-10 19:50:57 发布
阅读量1w 收藏 1
点赞数 1
分类专栏： html+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windvally/article/details/50899587
版权
本文介绍一种不依赖JavaScript的HTML方法，当单选按钮被选中时，如何巧妙地显示输入框和提示信息，对于惧怕JS的开发者来说非常实用。
摘要由CSDN通过智能技术生成

如果内心深处恐惧ＪＳ的话，以下是很简单实用的方法：

<div >

<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>
<div style="font-family:microsoft yahei;font-size:22pt;paddin
最低0.47元/天 解锁文章
windvally
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html input radio样式修改,利用CSS 修改input=radio的默认样式(改成选择框)
weixin_34392923的博客
06-03 1393
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 ...
select、radio选中某一项后,自动弹出一个相应文本框供输入
dby124的博客
11-11 9988
1、select，弹出相应文本框说明：当select选中值改为else，其值为“-1”时，显示一个自定义的输入框，若要将自定义的项加入到select的数据项中，需在后台将自定义项存入对应的数据表中，这样，在刷新后，下一次访问这个select时，该自定义项就会出出现在select的选项中。项目的技术成果发布表单中的就有该功能的应用。js： function chg(obj) {
小程序更改checkbox和radio默认样式
林中明月间丶
04-22 991
https://developers.weixin.qq.com/community/develop/doc/0002c84233032862c6f6bb13256404 复制粘贴 改颜色就行 1、checkbox checkbox .wx-checkbox-input{ border-radius:50%; width: 40rpx; height: 40rpx...
html redio 选择事件,Radio选项选中触发事件弹出输入框效果
weixin_42565402的博客
06-05 908
有的时候需要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 1973
有时候会遇到这么一个很简单的功能： 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 4365
html代码： 选项一 选项二 其它 jquery代码： $(function(){ $(".same").click(function(){ $(this).siblings().attr("checked",false); $(this).attr("checked",true);
layui radio点击事件实现input显示和隐藏的例子
10-16
在这段JavaScript代码中，我们使用了jQuery的选择器和方法来获取当前选中的radio按钮的值，并根据值的不同来控制试用次数输入框的显示或隐藏。具体来说，当用户选中值为“购买”的radio按钮时，通过jQuery的hide方法...
elementUi vue el-radio 监听选中变化的实例代码
10-16
在上面的代码中，el-radio-group绑定了一个名为radioSex的数据属性，该属性用于存储当前选中的单选按钮的值。当用户改变选中的单选按钮时，changeHandler方法会被触发，并打印出改变后的值。 ```javascript export ...
实现选择radio按钮后添加一个文本输入框的示例
windvally的专栏
03-16 5245
实现选择radio按钮后添加一个文本输入框： onclick="document.getElementById('gmwp').style.display='';document.getElementById('label').style.display='' " />有       onclick="document.getElementById('gmwp').style.
jQuery设置单选按钮radio选中/不可用的实例代码
10-22
在本文中，我们主要探讨了如何使用jQuery来设置HTML表单中的单选按钮（radio按钮）的选中状态和禁用状态。单选按钮允许用户从一组选项中只选择一个选项。在某些情况下，我们可能需要根据应用程序的逻辑来动态控制...
一个用radio控制的输入框
迷失在爪哇世界中的专栏
04-25 1909
第一种方法：   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 4323
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 602
脚本说明: 把如下代码加入<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 788
例子 单选框radio（不用name和value做判断判断条件）。 点击“其他”时候，后面的input填写框显示。 点击“中国大陆”，后面input填写框不显示。 代码 html代码，默认选择“中国大陆”。 <div class="a"> <div> 注册地域： </div> <div> <label><input class="AreaLan"
el-radio单选前提示验证
weixin_46194350的博客
05-10 768
el-radio单选前提示验证
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
weixin_34083807的博客
05-31 542
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 2265
今天需要做一个单选框，然后单选框上的显示文本需要是后台传输过来的，由于之前只是后端，前端写的很少，而且经过了解后发现uview时uniapp的一个UI，也就是移动端的组件，是我从来没接触过的组件，所以上手组件就花了一个上午，不过好在下午就做出来了这个功能。:name中的item.后面的名字一定要改成实体类中的名字，否则就会拿不到数据！(ps.其实主要是因为这个忘记改了才浪费许多时间)我这个数组中拿到的是两个实体类，后台代码就不展示了。根据需要的进行删改；
单选框选中时对应输入框可输入
TWenYuan的博客
12-02 2184
单选框选中时对应输入框可输入 首先在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
layui单选按钮不同按钮显示输入框不同
最新发布
05-19
你可以使用 layui 的表单组件和事件监听来实现这个功能。具体步骤如下： 1. 在 HTML 中添加单选按钮和输入框： ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">选项</label> <div class="layui-input-block"> <input type="radio" name="option" value="1" title="选项1"> <input type="radio" name="option" value="2" title="选项2"> <input type="radio" name="option" value="3" title="选项3"> </div> </div> <div class="layui-form-item" id="input1" style="display:none;"> <label class="layui-form-label">输入框1</label> <div class="layui-input-block"> <input type="text" name="input1" placeholder="请输入输入框1" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" id="input2" style="display:none;"> <label class="layui-form-label">输入框2</label> <div class="layui-input-block"> <input type="text" name="input2" placeholder="请输入输入框2" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" id="input3" style="display:none;"> <label class="layui-form-label">输入框3</label> <div class="layui-input-block"> <input type="text" name="input3" placeholder="请输入输入框3" autocomplete="off" class="layui-input"> </div> </div> </form> ``` 2. 在 JavaScript 中监听单选按钮的变化，根据选中的按钮显示对应的输入框： ```javascript // layui表单组件 var form = layui.form; // 监听单选按钮的变化 form.on('radio(option)', function(data){ // 隐藏所有输入框 $('#input1').hide(); $('#input2').hide(); $('#input3').hide(); // 根据选中的按钮显示对应的输入框 if (data.value == '1') { $('#input1').show(); } else if (data.value == '2') { $('#input2').show(); } else if (data.value == '3') { $('#input3').show(); } }); ``` 3. 最后记得引入 layui 的相关文件： ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值