jquery - 选定的单选按钮显示带有 jQ​​uery 的文本输入

Question

我有一组单选框，您可以在其中选择金额。最后一个选项是其他。我希望该选项在选中后显示金额字段。这是使用 jquery mobile 构建的。

jsFiddle link

<fieldset data-role="controlgroup">
<legend>Select Amount</legend>
<input type="radio" name="amount" id="50" value="50" checked="checked"/>
<label for="50">$50</label>

<input type="radio" name="amount" id="100" value="100"/>
<label for="100">$100</label>

<input type="radio" name="amount" id="250" value="250"/>
<label for="250">$250</label>

<input type="radio" name="amount" id="500" value="500"/>
<label for="500">$500</label>

<input type="radio" name="amount" id="1000" value="1000"/>
<label for="1000">$1000</label>

<input type="radio" name="amount" id="other" value="other"/>
<label for="other">Other</label>
    <div id="enter_amount">
        <label for="other_amount">Enter Amount:</label>
        <input type="text" name="other_amount" id="other_amount" value="" data-theme="d"  />
    </div>
</fieldset>

我需要写什么才能让它工作？我目前正在尝试以下操作:

$(document).ready(function(){
    $("#enter_amount").css("display","none");
        $("#other").click(function(){
        if ($('#other:checked')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

不幸的是，除了简单地隐藏加载时的输入框之外，这不起作用。

Answer 1

使用 .change 而不是 .click。我还修改了您的代码以考虑其他一些情况。 这是 fiddle 。

$(document).ready(function(){
    $('#enter_amount').hide(); 
    $('fieldset :radio').change(function(){
       if( this.id === 'other' )
           $('#enter_amount').slideDown('slow'); 
        else if( $('#enter_amount').is(':visible') )
           $('#enter_amount').slideUp('slow');               
    }); 
});