Adding values of selected input’s within another input

Asked

Viewed 936 times

2

I have for example 4 input, each input has a specific value ex:

*input com os valores
  <input type="radio"  value="1">
  <input type="radio"  value="2">
  <input type="radio"  value="3">
  <input type="radio"  value="4">

*input onde os valores serão adicionados
  <input name="input vazio" type="text"  value="">

And I still have another input, and that input initially will be with the empty value, and as selected input, the values relating to input selected will be added to that other input empty, ex:

<input type="radio"  value="1">  *esse input foi selecionado, logo o input vazio ficará assim

<input name="input vazio" type="text"  value="1">

Suppose I select more than one button, I want you to add the values of both selected buttons, e.g.:

<input type="radio"  value="1">  *esse input foi selecionado
<input type="radio"  value="2">  *esse input foi também foi selecionado
<input type="radio"  value="3">  *esse terceiro também foi selecionado

*logo o input que inicialmente estava vazio ficará assim :     
    <input name="input vazio" type="text"  value="1 2 3">
php jquery html

  • I have the impression that it is similar/equal to How to change the selected option in my combobox from a li'?

  • Yes, and similar, except that in this example you gave the values are not added, because as I said, I would like to add the values of the selected inputs, and in this example you pass it just changes by each other.

  • Actually, I made a mistake, it was this other answer abfurlan as well, but in the end the case is different...

2 answers

3


You can make a loop by checking the marked ones and putting in a array, and then apply the function join to put the values in the input by separating them by space, for example:

Jsfiddle

HTML

<label><input type="radio"  value="1" /> 1</label>
<label><input type="radio"  value="2" /> 2</label>
<label><input type="radio"  value="3"/> 3</label>
<label><input name="input vazio" type="text"  value=""/></label>

jQuery

$('input[type="radio"]').on('change',function(){
    //array que conterá valores dos inputs marcados
    var a = [];
    //faz loop nos inputs marcados
    $('input[type="radio"]:checked').each(function(){
        a.push($(this).val());
    });
    //coloca os valores no input text separando por espaços
    $('input[type="text"]').val(a.join(' '));

});

2

It is necessary to listen to the .change() of radio inputs and change the .val() of the text input according to this change. I added the class my-radio for these buttons and my-result for the text input:

$('.my-radio').change(function(){
    var preencher = $('.my-result').val() + $(this).val();
    $('.my-result').val( preencher );
});
$('.my-clear').click(function(){
    $('.my-radio').removeAttr('checked');
    $('.my-result').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="my-radio" type="radio" value="1">
<input class="my-radio" type="radio" value="2">
<input class="my-radio" type="radio" value="3">
<input class="my-radio" type="radio" value="4">
<input class="my-result" name="input vazio" type="text" value="">
<br />
<button class="my-clear">limpar</button>

Browser other questions tagged php jquery html

You are not signed in. Login or sign up in order to post.