Javascript 全部选中/全部取消选中-复选框和表格数据

我目前正在使用显示表格数据。每行都有一个复选框。有一个主复选框可选择全部。我遇到了一些困难。这个表有一个过滤器。当我应用过滤器并尝试选中该过滤器中的所有复选框时，它将不起作用。另外，既然我可以一次勾选所有复选框，有没有其他方法可以取消勾选所有复选框

复选框函数

$(document).on('change','input[name="check_all"]',function() {
        $("input[type=checkbox]").attr('checked', true);
    });
    $(document).on('change','select',function() {
        $('input[type=checkbox]').attr('checked', false);
    });

表过滤器

$(function () {
        $('table').footable().bind({
            'footable_filtering': function (e) {
                var selected = $('.filter-status').find(':selected').text();
                if (selected && selected.length > 0) {
                    e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                    e.clear = !e.filter;
                }
            },
            'footable_filtered': function() {
                var count = $('table.demo tbody tr:not(.footable-filtered)').length;
                $('.row-count').html(count + ' rows found');
            }
        });

        $('.clear-filter').click(function (e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
            $('.row-count').html('');
        });

        $('.filter-status').change(function (e) {
            e.preventDefault();
            $('table.demo').data('footable-filter').filter( $('#filter').val() );
        });
    });

• 使用.prop（）而不是.attr（）
• 仅选中/取消选中可见行
• 将选中状态设置为“选择所有复选框”状态

试一试

• 使用.prop（）而不是.attr（）
• 仅选中/取消选中可见行
• 将选中状态设置为“选择所有复选框”状态

试一试

---

使用

not

选择器尝试此选项，该选择器将选择除类

。footable-filtered

 $(document).on('change', 'input[name="check_all"]', function () {
            $(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);

        });

---

使用

not

选择器尝试此选项，该选择器将选择除类

。footable-filtered

 $(document).on('change', 'input[name="check_all"]', function () {
            $(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);

        });

---

您仍然选中所有框的原因是您没有在jquery中正确设置过滤器。更改为：

$(document).on('change', 'input[name="check_all"]', function () {
          $("table.demo tbody tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
            alert($("input:checkbox:checked").length);
        });

---

您仍然选中所有框的原因是您没有在jquery中正确设置过滤器。更改为：

$(document).on('change', 'input[name="check_all"]', function () {
          $("table.demo tbody tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
            alert($("input:checkbox:checked").length);
        });

---

---

使用

.prop

代替

.attr

使用

.prop

代替

.attr

太棒了！我的实际表要大得多，因此应用了多个分页和过滤器。您的技术只检查第一页上的所有复选框，而不检查其他页。@Code\u Ed\u Student分页是如何完成的。。。是否通过AJAX加载数据例如，如果在应用过滤器时使用firebug进行检查，则某些行被隐藏，并且具有一个

footable filtered

类，使用上面的功能，我只想选中筛选结果中的复选框。太好了！我的实际表要大得多，因此应用了多个分页和过滤器。您的技术只检查第一页上的所有复选框，而不检查其他页。@Code\u Ed\u Student分页是如何完成的。。。是否通过Ajax加载数据例如，如果在应用筛选器时使用firebug进行检查，则某些行将被隐藏，并且具有一个可过滤的

footable类

，使用上面的函数，我只想选中筛选结果中的复选框。问题是，这仍然会选中由于筛选而隐藏的复选框。@Code\u Ed\u Student，你想要什么？不应检查隐藏的？正确，不应检查隐藏的。例如，如果您在应用筛选器时使用firebug进行检查，则某些行被隐藏，并且有一个类为“footable filtered”，在“全部检查”时使用上述函数，它将选择筛选结果中的所有内容以及从筛选器中隐藏的内容。@code\u Ed\u Student check编辑的代码是否为“此为您编写”？它仍在检查所有内容，选中我将放置一个警报以显示选中框的总数。问题是，这仍然会检查由于筛选而隐藏的复选框。@Code\u Ed\u Student，你想知道吗？不应检查隐藏的？正确，不应检查隐藏的。例如，如果您在应用筛选器时使用firebug进行检查，则某些行被隐藏，并且有一个类为“footable filtered”，在“全部检查”时使用上述函数，它将选择筛选结果中的所有内容以及从筛选器中隐藏的内容。@code\u Ed\u Student check编辑的代码是否为“此为您编写”？它仍在检查所有内容，选中我将放置一个警报以显示选中框的总数。