Get id of the marked ckeck box

Question

I need you to get the id of the check box marked. I’m assembling the dynamically check the following way:

<li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-
ver="0">
     <label class="checkbox">
        <input id="codigoPessoaPresente" value="'+pessoa.COD_IDENT_PESSO+'" type="hidden">
        <input type="checkbox" checked>
     </label>'+ pessoa.TXT_NOMEX_PESSO +'
</li>

How can I do this ?

Answer 1

function cbx1(){
    var arr = []; /* Cria array com todos os names dos check selecionados */
    var itens = document.querySelectorAll('.check:checked'); /* Busca todos os elementos com o class .checked e que possuam um atributo checked. Nesse caso somente radio e checkbox possuem tal atributo */
    for(var i in itens)
       arr.push(itens[i].name); /* Inclui name do elemento em um array*/

    alert(arr);
    return arr /* Retorna esse array */;
}

function cbx2(){
    var arr = [];/* Cria array com todos os names dos check selecionados */
    $('.check:checked').each(function(item){ /* Busca todos os elementos com o class .checked e que possuam um atributo checked. Nesse caso somente radio e checkbox possuem tal atributo */
        arr.push($(this).attr("name"));/* Inclui name do elemento em um array*/
    });
    alert(arr);
    return arr /* Retorna esse array */;
}

function cbx3(){
    var arr = []/* Cria array com todos os names dos check selecionados */;
    var inputElements = document.getElementsByClassName('check') /* Busca todos os elementos com o class check */;
    for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked) /* Verifique se o elemento em questão está com o atributo checked marcado */
        arr.push(inputElements[i].name) /* Inclui name do elemento em um array*/;
    }
    alert(arr)
    return arr/* Retorna esse array */;
}

<input class='check' type='checkbox' name='check1' />
<input class='check' type='checkbox' name='check2' />
<input class='check' type='checkbox' name='check3' />
<input class='check' type='checkbox' name='check4' />
<input class='check' type='checkbox' name='check5' />
<button onclick='cbx1()'>Pegar cbx1</button>
<button onclick='cbx2()'>Pegar cbx2</button>
<button onclick='cbx3()'>Pegar cbx3</button>

In HTML:

 <input type="checkbox" checked class="messageCheckbox">

Newer browsers:

function cbx1(){
    var arr = [];
    var itens = document.querySelectorAll('.check:checked');
    for(var i in itens)
        if(itens[i].checked)
            arr.push(itens[i].name);

    console.log(arr);
    return arr;
}

Using jQuery:

function cbx2(){
    var arr = [];
    $('.check:checked').each(function(item){
        arr.push($(this).attr("name"));
    });
    console.log(arr);
    return arr;
}

Pure Javascript without jQuery:

function cbx3(){
    var arr = [];
    var inputElements = document.getElementsByClassName('check');
    for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked)
        arr.push(inputElements[i].name);
    }
    console.log(arr)
    return arr;
}

Answer 2

function getIdCheckBoxByLi(_this){
    var id = null;
    if(jQuery(_this).is(':checked')){
        id = jQuery(_this).parents('li:eq(0)').find('input[type="hidden"]').attr('id');
    }
    return id;
}

jQuery('input[type="checkbox"]').on('click', function(e){
    var id;
    if(id = getIdCheckBoxByLi(this)){
        console.log(id);
    }
});