Concatenate Radio Elements

Navigation
1

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 check out jsfiddle

I want to concatenate the spans 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 the spans that are in that group and in all other groups. Saving each concatenation of each group in a vector index.

NOTE: The code has to serve to 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"
    
asked by anonymous 28.02.2018 / 23:33

2 answers

1

If this pattern is always <textarea> followed by input radio , you can do this 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><textareaname='arraytextArea[]'></textarea><br><inputtype="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">
    
01.03.2018 / 03:17
2

You can start by grouping the radius values into an object using the group name as the key. For simplicity you can directly add the value of <span> following, resulting in something like: 

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

Next, go through the keys of this object and concatenate all elements of each array using the join with the appropriate tab, 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><textareaname='arraytextArea[]'></textarea><br><inputtype="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">
    
01.03.2018 / 01:23
Lock the mouse scroll in JavaScript Load a Dropdownlist based on an enum - Asp.net core