更新单选字段 select

Question

在一个表单中，我有一组单选按钮，其中包含固定的捐赠金额和用户可以输入选择金额的另一个字段。为简单起见，在处理表单时，我想要一个功能，其中选择的任何内容都会填充到另一个字段中。我有下面的 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"></label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-2" value="15.00">
  <label for="amount-2"></label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-3" value="20.00">
  <label for="amount-3"></label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-3" value="20.00">
  <label for="amount-4"></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">

我也试过了

<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">

但是当第一个发生变化时，它不会在随后的点击中发生变化。

Answer 1

None 的 ID 以 "radio," 开头，这是您的 [id^='radio'] 选择器试图匹配的。

它们以 "amount" 开头，因此您应该使用：

$("input[id^='amount']").click(...

此外，这里还有一个可用于标签的技巧。

而不是做：

<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1"></label>

…你可以将输入放在标签内，避免完全使用 for 属性：

<label>
  <input type="radio" name="selamount" id="amount-1" value="10.00">
  
</label>

工作代码段

$("input[id^='amount']").click(function() { //CHANGE THIS
  $("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">
  <label>
    <input type="radio" name="selamount" id="amount-1" value="10.00">
    
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-2" value="15.00">
    
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-3" value="20.00">
    
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-3" value="20.00">
    
  </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">

更新单选字段 select

update field on radio select

javascript

jquery

radio-group