jquery - 通过脚本取消选中全部与通过鼠标单击取消选中

Question

我有一个脚本，其中表中的每一列都有一个复选框，如果选中该复选框，则该列将被隐藏。如果我用鼠标选中该框，则效果很好。但是，我正在尝试实现检查/取消选中所有脚本，虽然这似乎做了它应该做的事情，即在浏览器中我可以看到所有列复选框都被选中和取消选中，但列不会被隐藏。只有当我手动取消选中每个框时，它们才会隐藏。

这是负责隐藏列的代码

$('input:checkbox').change(function(){
   var ColToHide = $(this).attr("name");    
    if(this.checked){
        $("td[class='" + ColToHide + "']").show();        
    }else{
        $("td[class='" + ColToHide + "']").hide();
    }

    $('div#Debug').text("hiding " + ColToHide);
});

这是选中/取消选中所有脚本

html

<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

jquery

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Answer 1

当您以编程方式设置checked 状态时，不会触发change 事件。要解决此问题，您可以手动引发事件，如下所示:

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked")).change();
});

另请注意，您可以使用 toggle 来缩短 change() 处理程序中的逻辑:

$('input:checkbox').change(function() {
    $("td[class='" + this.name + "']").toggle(this.checked);
});