Question

Currently we have a table with a bunch of data from a database which the user can “check” symbolizing that they use this content. This is also prepopulated such that if it is a returning user, the things they submitted before are checked onload. Since this list of data is long, it is hard to tell what data has been selected, so what I want to do is display a list of what has been checked to the side. This in itself isn’t that hard on first running, but I want it to keep updated as users uncheck and check other data.

When prepopulating the checkboxes I used .click to check the different boxes so I think the way to go is have a function for the click event that will add the content that was clicked to the display list or remove it from the display. The main problems I have run into is that:

1. Javascript does not support lists in the way as Python does and such so I am not sure of the best way to add an entry to an array or remove it as it goes.
2. How to pull the content of the checked data so to add it to the list.

Not sure how much these code snippets will help as the program contains more information than just this one field. An easy way to do it is just make a basic checkbox with multiple entries containing different text values and trying to make it print an array of the checked entries not worrying about the code I have already.
Any help is appreciated though,
Daniel

HTML for area:

<div id="technologies" class="scroll_fixed2">
              <py:for each="item in technologies">
                <input type="checkbox" name="technologies[]" id="technologies_$item" value="$item"><label for="technologies_$item">$item</label></input><br />
              </py:for>
            </div>

Javascript / JQuery so far:

// Check all previously selected items
for(item in technology_list){
    $('input[id=\'technologies_' + $.escape(technology_list[item]) + 
      '\']').click();
}

Answer 1

var inputs = $('#technologies input:checkbox') // selects them

inputs.trigger('click') // triggers them

var values = inputs.map(function() { return this.value }).get() // grabs values into an array

You can use input:checkbox:checked for checked ones.

If you want to select all inputs within that element.