How To Append The Checked Boxes Name?

In this fiddle There is a To and when its pressed a modal dialog box appears.The dialog box has a drop down menu.When groups or users drop down is selected then a table with check

Solution 1:

First, I moved the two tables #mytable and #groupTable to the dialog

<divclass="tab-content "><divclass="tab-pane "id="users">Users
        <tableid="mytable"class="table table-bordered">
...
        </table></div><divclass="tab-pane"id="groups">Groups
        <tableid="groupsTable"class="table table-bordered">
...
        </table></div></div>

This simplifies switching between the two tabs

$('.select').on('change', function () {
    var tablink = '#' + $(this).val();
    $('a[href="' + tablink + '"]').tab('show');
});

Now, you can easily pick up the checked names

functioncollect_users() {
    var users = [];
    $('input:checked', '#mytable').closest('td').next('td').each(function() {
        users.push($(this).text());
    });

    $('#ToAdd').text(users.join(', '));
}

$('#mytable input:checkbox').click(collect_users);

Similar goes for the #groupTable.

See modified JSFiddle

Solution 2:

Add your checkboxes inside some div / form and handle on change event ,

$('#container input:checkbox[name=groupname]').on('change', function (event) {
   $("#Toadd").html('');
   $('#container input:checkbox[name=groupname]:checked').each(function() {
       $("#Toadd").append($(this).attr('data-id'));
   }
});

Working DEMO

Solution 3:

Try this fiddle jsfiddle

You have to bind the change event each time the table is dynamically created. Sorry about the previous fiddle.

 $("input[type='checkbox']", "#mytable1").on('change', function (event) {
        $("#ToAdd").html('');
        $("input[type='checkbox']:checked", "#mytable1").each(function() {
           $("#ToAdd").append($(this).parent().next().text() + " ");           
       });
   });

You can create same thing for groups if you want.