Append one by one in input text from checkboxes

I have a jQuery script that appends all checkboxes values into one <input type="text"/> with ',', but when I check one box, it appends all the values from the others checkboxes aswell, and I want only to append those I checked in sequence.

HTML inputs:

<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

jQuery code:

$('.check_list').on('change', function () {
    var n = $(this).siblings('input:checkbox');
    var nControl = $('.codeParc');

    if ($(this).prop('checked')) {
        n.prop('checked',true);
        var vals = nControl.map(function () {
            return $(this).val();
        }).get().join(',');

    } else {
        n.prop('checked',false);
    }
    $('#test').val(vals);
});

This code is returning me all values 1,2,3 whenever I check one checkbox, what I need is to check one box and display only his number, and then append the rest when they are checked.