You just need to replace the following line of code:
arr.push(inputElements[i].name);
for this:
arr.push(inputElements[i].parentNode.parentNode);
But I let myself make a suggestion, instead of checking all the checkboxes to then check which ones are marked, you can do this right on the selector, then the following code snippet
var inputElements = document.getElementsByClassName('ckeckVisitantes');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked)
arr.push(inputElements[i].parentNode.parentNode);
}
may be simplified to the following:
var inputElements = document.querySelectorAll('.ckeckVisitantes:checked');
for(var i=0; inputElements[i]; ++i) {
arr.push(inputElements[i].parentNode.parentNode);
}
finally, instead of assembling your lines using strings, you can use an HTML5 feature... Templates:
In HTML you would have something like:
<template id="tmplLinha">
<li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
<label class="checkbox labelVisitantes">
<input type="checkbox" class="check ckeckVisitantes" />
<input type="hidden" class="hiddenVisitantes" />
</label>
</li>
</template>
And in Jakarta it would have something like:
pessoas.forEach(function (pessoa, indice) {
var linha = document.importNode(tmplLinha, true);
var label = linha.querySelector(".labelVisitantes");
var check = linha.querySelector(".ckeckVisitantes");
var hidden = linha.querySelector(".hiddenVisitantes");
var texto = document.createTextNode(pessoa.TXT_NOMEX_PESSO);
label.appendChild(texto);
check.name = pessoa.COD_IDENT_PESSO;
hidden.value = pessoa.COD_IDENT_PESSO;
container.appendChild(linha);
});
may seem complicated and the code gets bigger, but in this case you stop manipulating strings and start manipulating elements, and this greatly improves the performance of the code.
Follow the full example:
var tmplLinha = document.getElementById("tmplLinha").content;
var container = document.getElementById("container");
var getSelecionados = document.getElementById("getSelecionados");
var pessoas = [];
for (var indice = 1; indice <= 10; indice++) {
var pessoa = {};
pessoa.COD_IDENT_PESSO = indice;
pessoa.TXT_NOMEX_PESSO = "Pessoa " + indice;
pessoas.push(pessoa);
}
pessoas.forEach(function (pessoa, indice) {
var linha = document.importNode(tmplLinha, true);
var label = linha.querySelector(".labelVisitantes");
var check = linha.querySelector(".ckeckVisitantes");
var hidden = linha.querySelector(".hiddenVisitantes");
var texto = document.createTextNode(pessoa.TXT_NOMEX_PESSO);
label.appendChild(texto);
check.name = pessoa.COD_IDENT_PESSO;
hidden.value = pessoa.COD_IDENT_PESSO;
container.appendChild(linha);
});
var onGetSelecionadosClick = function (event) {
//listando checkbox selecionados;
var selecionados = container.querySelectorAll(".ckeckVisitantes:checked");
//listando linhas à que os checkboxes selecionados pertecem.
var linhas = [].map.call(selecionados, function (selecionado, indice) {
return selecionado.parentNode.parentNode;
});
//remotando o modelo (Pessoa) para os checkbox selecionados.
var pessoas = [].map.call(linhas, function (linha, indice) {
var label = linha.querySelector(".labelVisitantes");
var hidden = linha.querySelector(".hiddenVisitantes");
return {
TXT_NOMEX_PESSO: label.textContent.trim(),
COD_IDENT_PESSO: hidden.value
};
});
console.log(selecionados, linhas, pessoas);
}
getSelecionados.addEventListener("click", onGetSelecionadosClick);
<template id="tmplLinha">
<li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
<label class="checkbox labelVisitantes">
<input type="checkbox" class="check ckeckVisitantes" />
<input type="hidden" class="hiddenVisitantes" />
</label>
</li>
</template>
<ul id="container">
</ul>
<button id="getSelecionados" >Obter Pessoas Selecionadas</button>
Ay yes heim! + 1
– Pedro Camara Junior
Very good, I did not use your method, because I was thinking and this would not cure my problems, because it would come already filled, I need that it would come in another way, however the solution of my problem was to take the id and go in the database to verify who is that id, and put the read back on the other page, and it worked. Thank you very much, is marked with certain your answer,
– Renan Rodrigues