多个不同的单选框点击分别显示输入框

最新推荐文章于 2022-05-17 20:29:38 发布

weixin_33962923

最新推荐文章于 2022-05-17 20:29:38 发布

阅读量748

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/qhorse/p/5039437.html

本文介绍了一种利用jQuery实现的交互效果，当选择特定单选按钮时，相邻的文本输入框将显示并自动填充该按钮的名称。此外，还会隐藏其他同类型的输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="box">
　　<ul>
　　　　<li><label><input type="radio" class="radio_ots" name="按钮一" />按钮一</label></li>
　　　　<input type="text" class="otext_ts" value="" />
　　　　<li><label><input type="radio" class="radio_ots" name="按钮一" />按钮一</label></li>
　　　　<input type="text" class="otext_ts" value="" />
　　</ul>
　　<ul>
　　　　<li><label><input type="radio" class="radio_ots" name="按钮二" />按钮二</label></li>
　　　　<input type="text" class="otext_ts" value="" />
　　　　<li><label><input type="radio" class="radio_ots" name="按钮二" />按钮二</label></li>
　　　　<input type="text" class="otext_ts" value="" />
　　</ul>
</div>

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
　　$(".otext_ts").css("display","none");  //使.otext_ts隐藏
　　$(".radio_ots").click(function(){
　　　　var otext_ts = $(this).parents("li").next(".otext_ts"); //获取当前所点击.radio_ots的下一个紧挨着的
　　　　var radio_ots = $(this).attr("name");  //获取当前所点击.radio_ots的name属性值
　　　　//alert(radio_ots);
　　　　if(otext_ts.css("display") == "none"){
　　　　　　otext_ts.css("display","block");  //判断，隐藏的.otext_ts显示
　　　　　　otext_ts.val(radio_ots);  //以文本形式输出获取的值
　　　　　　otext_ts.siblings(".otext_ts").css("display","none");  //将本元素外的所有同类元素隐藏
　　　　}
　　})
})
</script>

转载于:https://www.cnblogs.com/qhorse/p/5039437.html