最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Change value of textbox based on radio box selection - Stack Overflow

programmeradmin1浏览0评论

I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:

    <input type="radio" name="radiogroup" id="radiogroup" value="5" />
    <input type="radio" name="radiogroup" id="radiogroup" value="10" />
    <input type="radio" name="radiogroup" id="radiogroup" value="15" />
    <input type="radio" name="radiogroup" id="radiogroup" value="20" />

    <input type="text" name="amount" id="amount" />

So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.

I am new to jquery and everything I tried did not work.

Thank you in advance for any help.

cdr6545

I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:

    <input type="radio" name="radiogroup" id="radiogroup" value="5" />
    <input type="radio" name="radiogroup" id="radiogroup" value="10" />
    <input type="radio" name="radiogroup" id="radiogroup" value="15" />
    <input type="radio" name="radiogroup" id="radiogroup" value="20" />

    <input type="text" name="amount" id="amount" />

So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.

I am new to jquery and everything I tried did not work.

Thank you in advance for any help.

cdr6545

Share Improve this question asked Feb 26, 2016 at 22:47 cdr6800cdr6800 1052 silver badges9 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

You can easily do this by adding class.

Working Fiddle

HTML:

    <input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="5" />
    <input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="10" />
    <input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="15" />
    <input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="20" />

    <input type="text" name="amount" id="amount" />

JS:

$('.radiogroup').change(function(e){
    var selectedValue = $(this).val();
    $('#amount').val(selectedValue)
});

ID's are unique, and an ID can only be used on one element in the current document, so change it to classes.

Then attach a change event handler to the radios, get the checked one, and set the value of the text input to the checked radios value

$('.radiogroup').on('change', function() {
  $('#amount').val( this.value );
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />

Something like:

$('input[name="radiogroup"]').click(function()
{
    $('#amount').val($(this).val())
})
发布评论

评论列表(0)

  1. 暂无评论