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

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

1 个答案: