在表单中,我有一组固定捐赠金额的单选按钮,当用户可以输入选择金额时,我有另一个字段。为简单起见,在处理表单时,我想要一个功能,其中选择的任何内容填充在另一个字段中。我有下面的HTML / JS:
$("input[id^='radio']").click(function() {
$("input[name='otheramount']").val(jQuery(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-2" value="15.00">
<label for="amount-2">$15</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-3">$20</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-4">$25</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
&#13;
我也试过
<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">
但是,当第一个更改时,它不再会在后续点击中发生变化。
答案 0 :(得分:3)
您的所有ID都不以&#34; radio,&#34;开头。这是[id^='radio']
选择器尝试匹配的内容。
他们以&#34;金额&#34;开头相反,所以你应该使用:
$("input[id^='amount']").click(...
此外,这是一个可以用于标签的技巧。
而不是:
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
...您可以将输入放在标签内,避免完全使用for
属性:
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
工作代码段
$("input[id^='amount']").click(function() { //CHANGE THIS
$("input[name='otheramount']").val(jQuery(this).val());
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-2" value="15.00">
$15
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$20
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$25
</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
&#13;