Javascript “全选”复选框仅在视觉上起作用

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

问题是，所有复选框都可以正常工作，但“全选”复选框仅在视觉上起作用，它会选中所有复选框，但不会按其应有的方式显示或隐藏所有列

这是复选框代码：

$(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);
    }
});

并选中所有复选框代码：

$(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);
    }
});

---

1st:根据需要，您需要将单击事件替换为更改事件

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

2nd:直到您需要使用

.change（）

或

.trigger（'change'）

---

1st:根据需要，您需要将单击事件替换为更改事件

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

2nd:直到您需要使用

.change（）

或

.trigger（'change'）

这应该很好

---

这应该可以正常工作…

@MiLaDA添加更改事件，然后使用

$inputs.prop（'checked'，This.checked.）.trigger（'change'）

或

$inputs.prop（'checked'，This.checked.）.change（）

谢谢巴斯蒂和穆罕默德，更改单击事件并最终触发更改事件是解决方案：）@Mohamed Yousef为什么要删除隐藏/显示部分？我认为这对他的用例很重要！对不起，巴斯蒂，我编辑了你的答案，让@MiLaDA和未来的任何人都清楚了。。祝你有一个美好的一天巴斯蒂和米兰达巴斯蒂这不是一个重要的部分，只是更多的代码。。当他/她已经在代码上使用

.toggle（）

时，他/她不需要再执行其他操作。。要清楚，在OP带来的问题上要具体。。获得好名声是件好事。。祝您好运：）@MiLaDA添加更改事件，然后使用

$inputs.prop（'checked'，this.checked.）.trigger（'change'）

或

$inputs.prop（'checked'，this.checked.）.change（）

谢谢巴斯蒂和穆罕默德，更改单击事件并最终触发更改事件是解决方案：）@Mohamed Yousef为什么要删除隐藏/显示部分？我认为这对他的用例很重要！对不起，巴斯蒂，我编辑了你的答案，让@MiLaDA和未来的任何人都清楚了。。祝你有一个美好的一天巴斯蒂和米兰达巴斯蒂这不是一个重要的部分，只是更多的代码。。当他/她已经在代码上使用

.toggle（）

时，他/她不需要再执行其他操作。。要清楚，在OP带来的问题上要具体。。获得好名声是件好事。。祝你好运：）