You just need to replace the following line of code:
arr.push(inputElements[i].name);
by this:
arr.push(inputElements[i].parentNode.parentNode);
But let me make a suggestion, instead of checking all checkboxes to check which ones are checked, you can do this right in 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);
}
can 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 javaScript 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);
});
It may seem complicated and the code gets bigger, but in this case you stop manipulating strings and start manipulating elements, and this greatly improves code performance.
Here is the complete 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>
