使用Jquery显示或隐藏MVC WebGrid列

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="checkbox" id="columnCheckbox">显示/隐藏列

@{
    var grid = new WebGrid(Model);
}

<div id="gridContainer">
    @grid.GetHtml()
</div>

$(document).ready(function() {
    // 获取复选框元素
    var columnCheckbox = $("#columnCheckbox");

    // 监听复选框的改变事件
    columnCheckbox.change(function() {
        // 获取复选框的选中状态
        var isChecked = $(this).is(":checked");

        // 根据选中状态显示或隐藏列
        if (isChecked) {
            // 显示列
            $("#gridContainer th").show();
            $("#gridContainer td").show();
        } else {
            // 隐藏列
            $("#gridContainer th").hide();
            $("#gridContainer td").hide();
        }
    });
});