如何將文本框輸入欄位的值傳遞給jQuery中的單選按鈕的值

我對 jquery 很陌生，我需要幫助解決以下問題。我有一個包含三個具有不同值的單選按鈕的表單，我還有一個沒有值的第四個單選按鈕，我希望它具有下面的數字文本框的值。如何在增加或減少單選按鈕時將文本框的值分配給單選按鈕的值。

function increaseValue() {
  var value=parseInt(document.getElementById('number').value, 10);
  value=isNaN(value) ? 0: value;
  value  ;
  document.getElementById('number').value=value;
}

function decreaseValue() {
  var value=parseInt(document.getElementById('number').value, 10);
  value=isNaN(value) ? 0: value;
  value < 1 ? value=1: '';
  value--;
  document.getElementById('number').value=value;
}

<div class="custom-control custom-radio mb-3">
  <input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
  <label class="custom-control-label" for="1coin">1 Coin</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
  <label class="custom-control-label" for="10coin">10 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
  <label class="custom-control-label" for="100coin">100 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
  <label class="custom-control-label" for="custom">Custom Coin</label>
</div>

<div class="custom-coin" style="display: none;">

  <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
  <input type="number" class="custom-count" id="number" value="0" />
  <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"> </div>
</div>

<div class="book-button text-center">

  <button class="btn btn-primary" type="submit"> Coin </button>

</div>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("input[class$='custom-coin']").click(function() {
      var trig = $(this).val();

      $("div.custom-coin").show();
    });

    $("input[class$='fixed-coin']").click(function() {
      var trig = $(this).val();

      $("div.custom-coin").hide();

    });
  });
</script>

uj5u.com熱心網友回復：

你可以這樣做：

$('.custom-count').change(function() {
  $('input.custom-coin:radio').val($(this).val())
})

因此，當您進行input更改時，它會將 的值添加input到radio按鈕中。

顯示代碼片段

$('.custom-control-input').change(function() {
  $("div.custom-coin").toggle($(this).hasClass("custom-coin"))
})

$('.custom-count').change(function() {
  $('input.custom-coin:radio').val($(this).val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-radio mb-3">
  <input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
  <label class="custom-control-label" for="1coin">1 Coin</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
  <label class="custom-control-label" for="10coin">10 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
  <label class="custom-control-label" for="100coin">100 Coins</label>
</div>

<div class="custom-control custom-radio mb-3">
  <input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
  <label class="custom-control-label" for="custom">Custom Coin</label>
</div>

<div class="custom-coin" style="display: none;">

  <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
  <input type="number" class="custom-count" id="number" value="0" />
  <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"> </div>
</div>

<div class="book-button text-center">

  <button class="btn btn-primary" type="submit"> Coin </button>

</div>

uj5u.com熱心網友回復：

您可以像這樣將輸入欄位值分配給單選按鈕。

$('#number').on("change", function() {
   $('.custom-coin').val($('#number').val())
})

標籤：javascript html 查询 形式 jquery-mobile

上一篇：新建一行復選框

下一篇：更改單選按鈕旁邊的字體大小