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

时间:2016-01-09 21:58:46

标签: javascript php jquery

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

<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>

3 个答案:

答案 0 :(得分:0)

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

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

DEMO

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

希望这有帮助。

&#13;
&#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;
&#13;
&#13;