Filling a Listbox with data from checkboxes

Question

I am having problems filling my Listbox, I can fill the Listbox with the values of the checkboxes of the corresponding Labels. I’m running out of ideas how I’m gonna do this.

The checkbox list is filled with jquery, following the way:

 itensNomesCatequizandos.append(catequizando.Nome + '<br />');
 itensCheckBoxCatequizandos.append('<input type="checkbox" name="SelectedCatequizandos[]" value="' + catequizando.PessoaID + '">' + '<br />');

My Listbox fills all the names into one of my own:

<script>
    function addListbox() {
        var itensListBoxCatequizandos = $("#SelectedCatequizandos");
        itensListBoxCatequizandos.empty();
        var myCheckboxes = new Array();
        $("input:checked").each(function () {
            myCheckboxes.push($(this).val());
            $.each($('.NomesCatequizando'), function (index, Nome) {
                $.each(myCheckboxes, function (index, value) {
                    itensListBoxCatequizandos.append('<option value="' + value.myCheckboxes + '">' + $(Nome).text() + '</option>');
                });


            });
        });

    }
</script>

Where I get the text to fill in the Listbox:

  <td id="NomesCatequizando" class="NomesCatequizando"></td>

Answer 1

I made a very simple POC, I hope it helps:

HTML:

<input type="checkbox" value="1" /> Um
<input type="checkbox" value="2" /> Dois
<input type="checkbox" value="3" /> Tres

<ul id="lista"></ul>

JQUERY:

$(function() {  
    $('input[type=checkbox]').click(function(){     
    var $lista = $('#lista');
    var value = $(this).val();
    var $item = $('<li/>').attr('data-id', value).html(value);        
        if(this.checked) {
        $item.appendTo($lista);
    } else {
      $lista.find('li[data-id='+ value +']').remove();
    }
    });
})

Test in Jsfiddle.