Question

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

<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');               
    }); 
});

Answer 2

这些是单选按钮，因此当选中另一个单选按钮时，默认情况下将取消选中其他按钮。因此，您应该绑定名称为“amount”的所有输入。此外，使用jQuery.is()将是查看复选框是否已选中的更好方法。还可以使用jQuery.change()事件

$(document).ready(function(){
    $("#enter_amount").css("display","none");
    $('input[name="amount"]').change(function(){
        if ($(this).is('#other')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

这是一个工作小提琴http://jsfiddle.net/jafmC/13/

Answer 3

您必须将其更改为：

if ($(this).is(":checked")) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }

Answer 4

试试这个

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

Answer 5

因为你不再真正与单选按钮本身交互（使用Firebug，Web Inspector或Dragonfly中的'inspect element'功能来查看），而是使用jQuery Mobile（或jQuery UI）提供的元素，你必须修改你的选择器：

$(document).ready(function() {
    $("#enter_amount").css("display", "none");
    $(".ui-radio").click(function() {
        if ($(this).has('#other') && $(this).has('.ui-icon-radio-on')){
            $('#enter_amount').slideDown(500); // works
        }
        else {
            $('#enter_amount').slideUp(500); // doesn't yet work
        }
    });
});

JS Fiddle demo

<小时/> 已编辑（相当有些恼怒，我必须承认）添加改进的（即'正常'）if / {{ 1}}检查：

else

JS Fiddle demo

Answer 6

$(document).ready(function(){
    $("#enter_amount").hide();

    $("input[name='amount']").change(function(){

        if($(":checked").val() == "other"){
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

你可以试试这个

Selected Radio按钮用jQuery显示文本输入

6 个答案: