選定的單選按鈕顯示與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文本輸入

回答

相關問題