Display selected checkbox values in div with jQuery

Question

I have a series of checkboxes and I would like to append the text value to a div every time and item gets selected, but I'd also like to remove the item from the div's text when an item is deselected.

I'm guessing the best way would be with some sort of an array? Can I get some guidance on this one?

edit: I should have mentioned this is for an ASP.NET checkboxlist (my bad), so my output looks something like this:

<div id="ctl00_ContentPlaceHolder1_divServices" style="width:450px; height:250px; overflow-y:scroll;">
                    <table id="ctl00_ContentPlaceHolder1_chklstServices" border="0">
<tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$0" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_0">Adhesives & Sealants</label></td>
</tr><tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$1" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_1">Air Ambulance</label></td>
</tr><tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$2" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_2">Air Charter</label></td>
</tr>
</table>
</div>
<div id="selectedServices"></div>

I am actually trying to accomplish two things:

1) colorize (or remove color) of the cell background color when the checkbox is toggled (done this bit) 2) Append or remove the text of selected items when the checkboxes are checked/unchecked

My javascript/jquery code:

function ToggleBGColour(item) {

    var td = $(item).parent();      

    if (td.is('.rowSelected'))      
        td.removeClass("rowSelected");      
    else        
        td.addClass("rowSelected");     

}

Answer 1

You can use .map() and Array.join(), like this:

$(":checkbox").change(function() {
  var arr = $(":checkbox:checked").map(function() { 
              return $(this).next().text();  //get the <label>'s text
            }).get();
  $("#myDiv").text(arr.join(','));
});

Whenever a checkbox changes, it'll loop through all checked checkboxes, create an array of their values, then put that as a comma delimited string into the <div>.

This is an example of course, just change the selectors to narrow down to the checkboxes you care about. You can give it a try here.