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

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

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

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

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

取消选中所有通过脚本vs通过鼠标单击取消选中

1 个答案: