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

<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