Question

在此fiddle 有一个To，当按下时会出现一个模态对话框。对话框有一个下拉菜单。当选择groups或users下拉菜单时，会出现一个带有复选框的表格。请在选中复选框时告诉我如何附加复选框名称，或者在取消选中复选框时删除删除附加名称。

追加我必须喜欢这个

$('#ToAdd').append('hi');

但我不知道如何调用它并获取values.please help

实施例

假设选择了组菜单，并从下面的复选框中选择第1行，然后hhh将显示在范围内

<span id="ToAdd"></span>

Answer 1

首先，我将两个表#mytable和#groupTable移到了对话框

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

这简化了两个标签之间的切换

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

现在，您可以轻松选择已检查的名称

function collect_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);

类似于#groupTable。

请参见修改后的JSFiddle

Answer 2

在div / form内添加您的复选框并处理更改事件

$('#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

Answer 3

试试这个小提琴 jsfiddle

每次动态创建表时都必须绑定change事件。对以前的小提琴抱歉。

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

如果需要，您可以为群组创建相同的内容。

如何附加复选框名称？

3 个答案:

Working DEMO