使用全选复选框移动数据答案

【问题标题】：Moving data using Select-All Checkboxes使用全选复选框移动数据
【发布时间】：2012-09-12 10:17:01
【问题描述】：

目前我有两张桌子

我在左上角的复选框上有全选功能，但是单击一个全选会突出显示两个表中的所有复选框，而我只希望在单击的特定“全选”中选中所有框。

此外，当我选择全部并单击方向按钮之一时，它会很好地拖动所有行，但会拖动标题，如下所示：

我的 JQuery 目前非常简单，但我显然错过了一些东西 -

 $('#select-all').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = true;
            });
        }
        else
        // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = false;
            });
    });

其中 'select-all' 是 'tarifs de quittancement' 中全选复选框的 ID。

感谢任何帮助

编辑

我的 > 按钮代码如下：

   $("#move-to-1").on("click", function () {
        var selected = $("#table2").find("input:checked");

        selected.each(function (idx, elem) {
            $(elem).closest("tr").detach().appendTo($("#table1 tbody"));
        });
    });

这可以很好地将所有内容从一个表移动到另一个表，但我不希望包含全选复选框/表标题的行与其余的行数据一起移动。如何做到这一点？

再次感谢。

进一步编辑

现在它已全部排序，除了一个小错误，即选择一个复选框行（不是全选）并移动它会导致所有行都被移动。

JQuery 正在使用中：

   $('#move-to-1').on('click', function () {
        var selected = $('#table2').find('input:checked');
        selected.each(function (idx, elem) {
            $(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
            $('input[type=checkbox]').attr('checked', false);
        });
    });   

   $('#select-all').click(function (event) {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
    });

【问题讨论】：

另一位版主拒绝了之前的标记，我认为这也不是太本地化。如果您不希望此问题与您的姓名相关联，您可以发送电子邮件至 team@stackoverflow.com 并请求解除关联
不要只看别人所说的表面价值。

标签： javascript jquery html asp.net-mvc-3

【解决方案1】：

您只需要修改当前表格中的复选框。由于您尚未显示您的标记，因此很难猜测正确的选择器的外观或您是否正在使用表格，但请尝试如下：

$('#select-all').click(function (event) {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

更新：

为了解决您的第二个问题，假设您已使用 <thead> 和 <tbody> 部分将这些表中的标题与正文分开，这是正确的方法，您可以调整您的选择器：

$('#move-to-1').on('click', function () {
    var selected = $('#table2 tbody').find('input:checked');
    selected.each(function (idx, elem) {
        $(elem).closest('tr').detach().appendTo($("#table1 tbody"));
    });
});

【讨论】：

别忘了展示你用来执行这些拖动的代码，否则很难提供帮助。

【解决方案2】：

$('#select-all').click(function (event) {

        // mention the table

        var table = $('selector_to_your_table');

        if (this.checked) {
            // Iterate each checkbox
            table.find(':checkbox').each(function () {
                this.checked = true;
            });
        }
        else
        // Iterate each checkbox
            table.find(':checkbox').each(function () {
                this.checked = false;
            });
    });

注意

在最新版本的 jQuery 中，:checkbox 已弃用。 See here.。

用input[type=checkbox]代替:checkbox。

【讨论】：

【解决方案3】：

代替：

$(':checkbox').each(function () {
  this.checked = true;
});

做：

$('some_sort_of_selector :checkbox').attr('checked', true);

你不需要 each() 循环 - jQuery 会自动完成。您需要某种选择器来限制更改的复选框。

我注意到您有#select-all - 但您说您有两个全选复选框。你不能那样做。 ID 必须是唯一的。

【讨论】：