选定的单选按钮显示与jQuery文本输入

我有一组收音机框，您可以选择您的金额。最后一个选项是其他。我希望该选项在检查后显示金额字段。这是使用jquery mobile构建的。选定的单选按钮显示与jQuery文本输入

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

不幸的是，这是不工作的根本躲在负载输入框外。

来源

2011-10-11 rmlumley

使用.change代替.click。此外，我修改了您的代码以解决其他一些情况。这是。

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

来源

2011-10-11 21:53:05

工作，谢谢。 – rmlumley

你必须将其更改为：

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

来源

2011-10-11 21:36:35 Evan

这些都是单选按钮，所以当另一个单选按钮被选中，然后对方会被默认选中。因此，您应该绑定到名称为“金额”的所有输入。使用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/

来源

2011-10-11 21:38:15

试试这个

$(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 
     } 
    }); 
});

来源

2011-10-11 21:39:41

因为你没有真正与无线电按钮本身更多的（使用“交互检查元素'功能在Firebug，Web Inspector或Dragonfly中查看），而是由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/ else检查：

$(document).ready(function() { 
    $("#enter_amount").css("display", "none"); 
    $(".ui-radio").click(function() { 
     if ($(this).find('#other').length) { 
      $('#enter_amount').slideDown(500); 
     } 
     else { 
      $('#enter_amount').slideUp(500); 
     } 
    }); 
});

JS Fiddle demo。

来源

2011-10-11 21:44:31

这主要工作，但#enter_amount字段显示，每当任何单选按钮被选中。 – rmlumley

是的;我试图自己解决这个问题......我不明白为什么它总是如此。这是我曾经（在字面上）在计算机上发誓的几次问：“____怎么能总是......真的......”？啊。 –

我认为@Interstellar_Coder钉在上面。 – rmlumley

$(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 
     } 
    }); 
});

你可以试试这个

来源

2011-10-11 21:58:58 x4tje

选定的单选按钮显示与jQuery文本输入

回答

相关问题