Concatenate Radio Elements

Question

I have the following code.

Html:

<div>

<textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo1" value="Valor1"><span>Valor1</span>

<input type="radio" name="grupo1" value="Valor2"><span>Valor2</span>

<input type="radio" name="grupo1" value="Valor3"><span>Valor3</span>

<input type="radio" name="grupo1" value="Valor4"><span>Valor4</span>

<br><textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo2" value="Valor1"><span>Valor2</span>

<input type="radio" name="grupo2" value="Valor2"><span>Valor3</span>

<input type="radio" name="grupo2" value="Valor3"><span>Valor4</span>

<input type="radio" name="grupo2" value="Valor4"><span>Valor5</span><br>

<input type="button" value="Enviar" id="botao">

Javascript:

$(function () {


   $("#botao").click(function () {

 $("textarea[name='arraytextArea[]'],input[name='grupo1'],input[name='grupo2']" ).each(function (i,el) {


                    alert("Valor:"+$(el).val());


                });



            })})

You can also see on jsfiddle

I want to concatenate the spans elements of each radio group. As noted in the code we have the first group identified by Teg name="group1", so I have to concatenate all spans that are in this group and in all other groups.Guarding each concatenation of each group in a vector index.

NOTE: The code has to be used for numerous groups and numerous radios.

EX.:

vet[0]="valor1,valor2,valo3,valo4"; relativo ao name="grupo1"
vet[1]="Valor2,valor3,valor4,valor5"; relativo ao name="grupo2" 

Answer 1

You can start by grouping the values of the radios into an object using the group name as key. To simplify you can directly add the value of <span> next, resulting in something like:

{
    grupo1: ["Valor1", "Valor2", "Valor3", "Valor4"],
    grupo2: ["Valor1", "Valor2", "Valor3", "Valor4"]
}

Then just go through the keys of this object and concatenate all the elements of each array using the function join with the appropriate separator, which would be the comma.

Implementation:

let radios = {};
$("input[type=radio]").each(function(){ //para cada input do tipo radio
  let nome = $(this).attr("name");
  if (radios[nome] === undefined){ //se não existe esta chave no objeto
    radios[nome] = []; //cria com array vazio
  }
  
  radios[nome].push($(this).next().text()); //adiciona o texto do <span> ao lado
});

let valores = [];
for (let chave of Object.keys(radios)){
  valores.push(radios[chave].join(',')); //concatenar valores com ,
}

console.log(valores);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo1" value="Valor1"><span>Valor1</span>

<input type="radio" name="grupo1" value="Valor2"><span>Valor2</span>

<input type="radio" name="grupo1" value="Valor3"><span>Valor3</span>

<input type="radio" name="grupo1" value="Valor4"><span>Valor4</span>

<br><textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo2" value="Valor1"><span>Valor2</span>

<input type="radio" name="grupo2" value="Valor2"><span>Valor3</span>

<input type="radio" name="grupo2" value="Valor3"><span>Valor4</span>

<input type="radio" name="grupo2" value="Valor4"><span>Valor5</span><br>

<input type="button" value="Enviar" id="botao">

Answer 2

If it’s always in that pattern <textarea> followed by input radio, can do this way using .nextUntil:

$(function () {

   let vet = [];

   $("#botao").click(function () {
      let textareas = $("textarea[name='arraytextArea[]']"),
      vals = '';
      textareas.each( (i,el) => {
   
         let radios = $(el).nextUntil("textarea", "input[type='radio']");
         radios.each( (i,el) => {
            vals += $(el).next().text()+' ';
         });
   
         vet.push(vals.trim().split(' '));
         vals = '';
   
      });
      console.log(vet);
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo1" value="Valor1"><span>Valor1</span>

<input type="radio" name="grupo1" value="Valor2"><span>Valor2</span>

<input type="radio" name="grupo1" value="Valor3"><span>Valor3</span>

<input type="radio" name="grupo1" value="Valor4"><span>Valor4</span>

<br>

<textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo2" value="Valor1"><span>Valor2</span>

<input type="radio" name="grupo2" value="Valor2"><span>Valor3</span>

<input type="radio" name="grupo2" value="Valor3"><span>Valor4</span>

<input type="radio" name="grupo2" value="Valor4"><span>Valor5</span>
<br>

<textarea name='arraytextArea[]'></textarea> <br>

<input type="radio" name="grupo3" value="Valor1"><span>Valor7</span>

<input type="radio" name="grupo3" value="Valor2"><span>Valor8</span>

<input type="radio" name="grupo3" value="Valor3"><span>Valor9</span>

<input type="radio" name="grupo3" value="Valor4"><span>Valor10</span>
<br>

<input type="button" value="Enviar" id="botao">