Question

我希望下面代码中的文本框能够显示用户何时选择“是”并隐藏他们是否选择“否”。

<table>
    <tr>
        <td style="width: 130px">
            <label for="edit-title" class="control-label" style="font-size: small;">Willing to Post?</label>
        </td>
        <td>
            <input type="radio" value="0" name="yesnopricing" checked="checked">&nbsp;&nbsp;No</td>
        <td>
            <input type="radio" style="padding-left: 20px;" value="1" name="yesnopricing">&nbsp;&nbsp;Yes</td>

        <td style="width: 25px"></td>
        <td>
            <input type="text" name="postageprice" placeholder="Postage Price">
        </td>
    </tr>
</table>

Answer 1

尝试做一些dom遍历，然后用值切换，

$(":radio[name='yesnopricing']").change(function(){
  $(this).parent().nextAll("td:has(input[name='postageprice'])").toggle(!!+this.value);
});

DEMO

Answer 2

将事件onclick添加到radio类型的两个输入。然后检查选择了哪一个，并依赖于输入类型文本上的调用方法hide（）或show（）。

Answer 3

请尝试使用class或id来识别您的输入，然后点击event显示隐藏您的字段，请查看以下示例。

希望这有帮助。

段

＆＃13;

$('body').on('click', '.yes_pricing', function(){
     $('#post_age_price').show();
})

$('body').on('click', '.no_pricing', function(){
     $('#post_age_price').hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
  <tr>
    <td style="width: 130px">   
      <label for="edit-title"  class="control-label" style="font-size: small;">Willing to Post?</label>
    </td>
    <td>
      <input class='no_pricing' type="radio" value="0" name="yesnopricing">&nbsp;&nbsp;No</td>
    <td><input class='yes_pricing'type="radio" style="padding-left: 20px;" value="1" name="yesnopricing" checked="checked">&nbsp;&nbsp;Yes</td>

    <td style="width: 25px"></td>
    <td>    <input id="post_age_price" type="text"  name="postageprice" placeholder="Postage Price"></td>
  </tr>
</table>

＆＃13;

如何在单选按钮上隐藏和显示文本框

3 个答案:

DEMO

段