添加单选按钮上的输入值，并删除

Question

我有一个捐赠表单，其中一个选项需要填充一定数量，因为它的固定价格点。我发现并运行了可以正常工作的代码，通过选择无线电输入来填充输入，但我希望以某种方式切换，如果选择另一个选项，则会移除填充的数量。那可能吗？

这是我现在的工作：

$('input#yearCaring').on('change', function() { 
 
    $('input[name="Amount"]').val($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="radio" name="In Honor/Memory Of" value="No" /> 
 
    <label>No Thanks</label> 
 
    <br /> 
 
    <input type="radio" name="In Honor/Memory Of" id="yearCaring" value="100" /> 
 
    <label>Year of Caring</label> 
 
    <br /> 
 
    <input type="radio" name="In Honor/Memory Of" value="In Memory" /> 
 
    <label>In Memory</label> 
 
    <br /> 
 
    <input type="text" name="In Memory Note" style="display: none;" value="" /> 
 
    <input type="radio" name="In Honor/Memory Of" value="In Celebration" /> 
 
    <label>In Celebration</label> 
 
    <br /> 
 
    <input type="text" name="In Celebration Note" style="display: none;" value="" /> 
 
</div> 
 

 
<label>Amount (Canadian Dollars):</label> 
 
<input type="text" name="Amount" required="" value="" />

我怎么会去 '切换' 呢？

fiddle

Answer 1

你可以检查所有的单选按钮，只适用于该值，如果它一定的ID如下一致：

$('input:radio').change(function() { 
 
    $('input[name="Amount"]').val((this.id == 'yearCaring') ? this.value : '').prop('disabled',(this.id == 'yearCaring') ? true : false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <div> 
 
     <input name="In Honor/Memory Of" type="radio" value="No" /> 
 
     <label>No Thanks</label> 
 
     <br /> 
 
     <input name="In Honor/Memory Of" id="yearCaring" type="radio" value="100" /> 
 
     <label>Year of Caring</label> 
 
     <br /> 
 
     <input name="In Honor/Memory Of" type="radio" value="In Memory" /> 
 
     <label>In Memory</label> 
 
     <br /> 
 
     <input name="In Memory Note" style="display: none;" type="text" value="" /> 
 
     <input name="In Honor/Memory Of" type="radio" value="In Celebration" /> 
 
     <label>In Celebration</label> 
 
     <br /> 
 
     <input name="In Celebration Note" style="display: none;" type="text" value="" /> 
 
    </div> 
 
    <label>Amount (Canadian Dollars):</label> 
 
    <input name="Amount" required="" type="text" value="" /> 
 
</form>

Answer 2

使用这样的

$('input[name="In Honor/Memory Of"]').on('change', function() { 
     $('input[name="Amount"]').val($(this).val()); 
});