Javascript 如何从两个不同的表中附加复选框？

其中有两个表，每行都有复选框

单击

To

按钮时，会出现一个对话框，选择用户或组下拉菜单后，会出现相应的表格。现在，如果选中复选框，则对应于复选框的名称会显示在底部

例如，从“组”下拉列表中，如果我选中第一个复选框，则底部将显示

alltest

。同样，如果我选中第一个复选框，则底部将显示

test

我的问题假设我从用户下拉列表中选择了前2个复选框，则底部将显示

测试测试2

。现在，如果我选择了组下拉列表并选择了第1个复选框，则

测试测试2

将消失，并显示

所有测试

。我希望

测试2所有测试

都显示在底部。这意味着底部所有选中的复选框名称。请告诉我如何操作参见演示 尝试如下所示 使用单独的标签

<span id="ToAdd_info">i want the checked boxes name here</span>
<span id="ToAdd"></span>

试试这个

演示：

单击时，您必须选中

用户

和

组

中的所有

复选框

$('#ToOk').click(function(){
   $("#number").val($("#ToAdd").text());
});

从span
到add
获取所有值，并将该值添加到
number
textbox
感谢您的回答，但输出如下
alltest，alltest，fff
function appendtext() {
        var httext = "";
        $("input[type='checkbox']:checked", "#mytable12").each(function() {
          httext += $(this).parent().next().text() + " ,";   
       });
        $("input[type='checkbox']:checked", "#groupsTable1").each(function() {
          httext += $(this).parent().next().text() + " ,";          
        });
        return httext;
}
     $("input[type='checkbox']", "#mytable12").on('change', function (event) {
      $("#ToAdd").html(appendtext());
   });

$("input[type='checkbox']", "#groupsTable1").on('change', function (event) {
         $("#ToAdd").html(appendtext()); 
   });

});

$('#ToOk').click(function(){
   $("#number").val($("#ToAdd").text());
});