爲什麼單選按鈕更改/點擊功能僅適用於最後一個單選按鈕？

Question

我有三個單選按鈕和一個由drupal生成的文本字段。我想要的是前兩個按鈕在單擊時隱藏文本字段，最後一個單選按鈕顯示文本字段。 （用於選擇前兩個選項爲標準金額且最後一個爲自定義金額的金額）。

我有Drupal的產生下面的代碼：

<div class="form-item"> 
<label>Jag uppgraderar till: </label> 
<div class="form-radios"><div class="form-item" id="edit-new-amount-no-cost-wrapper"> 
<label class="option" for="edit-new-amount-no-cost"><input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio" /> Ingen kostnad</label> 

</div> 
<div class="form-item" id="edit-new-amount-rounded-wrapper"> 
<label class="option" for="edit-new-amount-rounded"><input type="radio" id="edit-new-amount-rounded" name="new_amount" value="rounded" class="form-radio" /> Avrundat upp</label> 
</div> 
<div class="form-item" id="edit-new-amount-other-wrapper"> 
<label class="option" for="edit-new-amount-other"><input type="radio" id="edit-new-amount-other" name="new_amount" value="other" class="form-radio" /> Annat belopp</label> 
</div> 
</div> 
</div> 
<div class="form-item" id="edit-other-amount-wrapper"> 
<label for="edit-other-amount">Annat belopp:: </label> 

<input type="text" maxlength="128" name="other_amount" id="edit-other-amount" size="60" value="" class="form-text" /> 
</div> 

我在jQuery的使用這個嘗試：

// When clicking on 1st radio button 
$('#edit-new-amount-no-cost').change(function(){ 
    $('#edit-other-amount-wrapper').hide(); 
}); 

// When clicking on 2nd radio button 
$('#edit-new-amount-rounded-cost').change(function(){ 
    $('#edit-other-amount-wrapper').hide(); 
}); 

// When clicking on 3rd radio button 
$('#edit-new-amount-other').change(function(){ 
    $('#edit-other-amount-wrapper').show(); 
}); 

這沒有奏效。只有第三個按鈕工作。

我也試圖通過他們的循環（和設置他們都隱藏文本框，甚至第三個按鈕）：

$('input[type=radio]').each(function() { 
    alert('Id: '+$(this).attr('id')); // Just to see that the loop works 
    $(this).change(function(){ 
    alert('Id: '+$(this).attr('id')); // Just to see that the function fires 
    $('#edit-other-amount-wrapper').hide(); 
    }); 
}); 

這也不能工作。我甚至添加了一個警告框來知道點擊功能的執行時間。這裏也是一樣，只有當第三個按鈕被點擊時纔會發生。

所以我的問題是：我無法設置所有單選按鈕onclick（或onchange，我也試過.change）。

你有什麼想法做什麼？

親切的問候， 塞繆爾

Answer 1

第二電臺的ID是錯誤的一樣提到kinakuta但你也可能想隱藏在默認情況下的文本框中。看看jsfiddle：http://jsfiddle.net/valanto/fShAv/

Answer 2

請在腳本標記的頁面底部嘗試此腳本。

$(function() { 
    $("input[name='new_amount']").change(function(){ 
    var selected_radio = $("input[name='new_amount']:checked").val(); 
    if (selected_radio == 'other') { 
    $('#edit-other-amount-wrapper').show(); 
    } 
    else{ 
    $('#edit-other-amount-wrapper').hide(); 
    } 
    }); 
});