Question

Following is my code and when the page Load its working fine, and the Array having data whatever we checked.

<div id="checkBoxes">
<input type="checkbox" class="applicationCheckbox" value="1" />
<input type="checkbox" class="applicationCheckbox" value="2" />
<input type="checkbox" class="applicationCheckbox" value="3" />
<input type="checkbox" class="applicationCheckbox" value="4" />
</div>

<script type="text/javascript">
$(".applicationCheckbox:checked").each(function(){
    applications[i] = $(this).val();
    i++;
});
</script>

But if i append some checkbox from jquery .append(), and if i select the checkboxes what ever appened, the array returns Empty 🙁

please help me to fix.

Answer 1

Attach a click or the change event to your Checkboxes..

  $(function(){
       $('body').on('click',.applicationCheckbox , function(){
           $(".applicationCheckbox:checked").each(function(i){
              applications[i] = $(this).val();
            });
        });
    });

Because you are adding the elements dynamically you need to delegate the event.

Body can be replaced with any static parent..

FULL CODE

var applications = [];
$(document).on('click', '.applicationCheckbox', function() {

    applications = $(".applicationCheckbox:checked").map(function() {
        return this.value;
    }).get();

    console.log(applications);
});

var i = 5;
$('#btn').on('click', function() {
    $('#checkBoxes').append('<input type="checkbox" class="applicationCheckbox" value="' + i + '" />');
    i++;
});​

Check Fiddle