支払い値を選択するためのラジオ リストがあります。支払い値を選択すると、金額テキスト入力に追加されます。
「その他の金額」のオプションもあります。
私がやりたいのは、「その他の金額」をクリックして、非表示のテキスト入力を表示することです。値を追加すると、「金額テキスト入力」に追加されます。
次に、他のラジオ値のいずれかをクリックして戻すと、「other-amount」テキスト入力が非表示になり、選択した値に変更されます。
HTML:
<div id="donation">
<input type="radio" name="my-input" id="0" value="$10.00" />
$10.00<br />
<input type="radio" name="my-input" id="1" value="$25.00" />
$25.00<br />
<input type="radio" name="my-input" id="2" value="$50.00" />
$50.00<br />
<input type="radio" name="my-input" id="3" value="$2500.00" />
$2500.00<br />
<input type="radio" name="my-input" id="other" value="Other Amount" />
Other Amount
</div>
<input type="text" id="other-amount" name="other-amount" />
<input type="text" id="amount" name="amount" readonly="readonly" />
これまでの Javascript:
$(document).ready(function() {
$("#donation input[type=radio]").filter(function() {
return $(this).val() == $("#amount").val();
}).attr('checked', true);
$("#donation").live("change", function() {
$("#amount").val($(this).find("input[type=radio]:checked").attr("value"));
});
});