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

<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