全选复选框仅在视觉上有效

Question

我在侧边栏中为该表的每一列创建了一个表格和一个复选框，以显示或隐藏该列以及一个全选复选框。

问题是所有复选框都可以正常工作，但全选复选框只能在视觉上工作，它会检查所有复选框，但不会按应有的方式显示或隐藏所有列。

这是复选框代码：

$(document).ready(function() {
    $("input:checkbox:not(:checked)").each(function() {
        var column = "table ." + $(this).attr("name");
        $(column).hide();
    });

    $("input:checkbox").click(function() {
        var column = "table ." + $(this).attr("name");
        $(column).toggle();
    });
});

并选择所有复选框代码：

$('#select-all').on('change', function (e) {
    var $inputs = $('#checkboxlist input[type=checkbox]');
    if (e.originalEvent === undefined) {
        var allChecked = true;
        $inputs.each(function () {
            allChecked = allChecked && this.checked;
        });
        this.checked = allChecked;
    } else {
        $inputs.prop('checked', this.checked);
    }
});

Answer 1

第一个：直到Difference between change and click event of checkbox，您需要将点击事件替换为更改事件

$("input:checkbox").change(function() {
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

第二个：直到trigger the change event，您需要使用.change() 或.trigger('change')。

$inputs.prop('checked', this.checked).change();

Answer 2

$("input:checkbox").on('change',function() {

这应该可以正常工作...