使用 jQuery 在 div 中显示选中的复选框值

Question

我有一系列复选框，我想每次都将文本值附加到 div 并选择项目，但我还想在取消选择项目时从 div 的文本中删除该项目。

我猜最好的方法是使用某种数组？我可以在这方面获得一些指导吗？

编辑：我应该提到这是针对 ASP.NET 复选框列表（我的错），所以我的输出看起来像这样：

<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>

我实际上是在尝试完成两件事：

1) 选中复选框时对单元格背景颜色进行着色（或移除颜色）（完成此操作） 2) 选中/取消选中复选框时追加或删除所选项目的文本

我的 javascript/jquery 代码：

function ToggleBGColour(item) {

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

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

}

Answer 1

你可以使用.map()和Array.join()，像这样：

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

每当一个复选框发生变化时，它都会遍历所有选中的复选框，创建一个包含其值的数组，然后将其作为逗号分隔的字符串放入<div>。

这当然是一个示例，只需将选择器更改为您关心的复选框即可。 You can give it a try here.