Get all "checked" checkboxes in a list generated dynamically by jQuery

Navigation
2

I have a modal in which it contains a list that is dynamically generated by jQuery via a callback of AJAX .

The question is that I need to get the id's of all the "checkbox's" that were selected in it. I'm pretty sure I'll need the .on() method, but I just do not know how I can do the same.

Below is my list that is generated dynamically: 

<ul id="list-of-passenger-service-item" class="list-cadastro skin skin-flat">
   <li>
       <input type="checkbox" id="25">
       <label>Claudia Fernadez - Filho(a) - 09/06/2000</label>
   </li>
</ul>

I have tried something like this, but unfortunately I did not succeed, because it "skips" .on() : 

$(document).on('change', '[type=checkbox]', function() {
    $(this).each(function(){
        console.log('obter os id\'s e armazenar em um array');
    });
});

EDITION

I will try to summarize the flow for a better understanding of all.

I have a button that aims to open a modal: 

//Abre o Modal e realiza o append (Exemplo para ilustração do meu caso)
$('#open-modal-item').click(function (event){
    event.preventDefault();
    $('#modalItem').modal('show');

    //Chamada AJAX omitida

    $('#list-of-passenger-service-item').append("<li> <input type=\"checkbox\" id=\""+value.id+"\"> <label>" + value.firstName + " " + value.lastName + " - Cônjuge - " + date.toLocaleDateString()  + '</label> </li>');

});

So, in my modal I have a button that aims to confirm the data: 

$('#service-item-btn-confirm').click(function (event){
   event.preventDefault();

   //Varias linhas foram omitidas para facilitar o entedimento

   //Chamo o metodo que tem como objetivo construir um objeto JSON para posteriormente passar para o back-end
   constructServiceItemObj();
})

Finally inside the constructServiceItemObj(); method I need to get all the checkbox's components that have been selected by the user: 

function constructServiceItemObj(){
    $("input:checkbox[name=type]:checked").each(function(i, el){
        var id = $(this).find(':input');
    });

});

Unfortunately the same does not work! Just because of the reason (I believe) that the elements of my checkbox's list are generated dynamically, so I need maybe a .on() in my $.each() .

    
asked by anonymous 26.08.2015 / 16:12

2 answers

6

You will not need to use on() in this case, because what you want is to get the IDs at a certain time, right? Like at the click of a button?

So, assuming you have a button that will get these IDs (it can be another event, the main one here is the central part of the code below), you can use the :checked selector to get the checkboxes that are marked. 

$("#botaoEnviar").click(function(){
  $("input:checked").each(function(){
    console.log($(this).attr("id"));
  });
});

Take the test and see if it suits you.

    
26.08.2015 / 16:25
2

To select the precise checkboxes of a CSS selector that includes what you want.

input[type="checkbox"] does this, or even the jQuery pseudo-selector ":checkbox" . But you should also use a common DOM element or class to ensure that you only get the inputs you want.

To select: 

var inputs = $('.lista-cadastros :checkbox');

eventually using :checked to filter out those that are not marked

to know the IDs: 

var ids = inputs.map(function(){
    return this.id;
});

If you need a native array and not a jQuery object you can call the .get(); at the end: 

var ids = inputs.map(function(){
    return this.id;
}).get();

The second part you write " need to get the id's of all the checkboxes that have been selected in the " may need .on() . In the question it is not clear when you need to run this code. In case the element that triggers this code has been dynamically added then you do need the .on() with delegation. In the simplest case you can use: 

$(document).on('click', 'seletor-para-o-elemento', function(){
    
26.08.2015 / 16:21
How to make a form submission without form? Explanation of recursion operation