[英]How to pass the value of a text box input field to the value of a radio button in jQuery
I am very new to jquery and i need help with the following problem.我对 jquery 非常陌生,我需要帮助解决以下问题。 I have a form with three radio buttons with different values, i also have a forth radio button that has no value, i want it to have the value of the the number text box below it.我有一个带有三个具有不同值的单选按钮的表单,我还有一个没有值的第四个单选按钮,我希望它具有它下面的数字文本框的值。 How can i assign the value of the text box to the value of the radio button as i increase or decrease it.当我增加或减少它时,如何将文本框的值分配给单选按钮的值。
<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>
<script>
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;
}
</script>
You can do it like this:你可以这样做:
$('.custom-count').change(function() {
$('input.custom-coin:radio').val($(this).val())
})
so when ever your input
changes then it will add the value of the input
to the radio
button.因此,当您的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>
You can assign input field value to the radio button like this way.您可以像这样将输入字段值分配给单选按钮。
$('#number').on("change", function() {
$('.custom-coin').val($('#number').val())
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.