Fill a ListBox with data from checkBoxes

Question

Fill a ListBox with data from checkBoxes

Navigation

#1 by (1 votes)

0

I'm having trouble populating my Listbox, I can populate the Listbox with the checkboxes values of the not with the corresponding Labels. I'm running short of how I'm going to do this.

The checkboxes list is populated with jquery, in the following way:

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

My ListBox fills all names in a single mine:

<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 do I get the text to populate the ListBox:

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

javascript html jquery

asked by anonymous 19.04.2016 / 19:03

1 answer

How to transform 2 form's into 1 only ' Problems in an array of strings in a structure

score 1 · Accepted Answer

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 on JsFiddle .