选择所有在 webgrid Jquery 和 ASP.net MVC 中不起作用的复选框答案

【问题标题】：Select all CheckBoxes not working inside a webgrid Jquery and ASP.net MVC选择所有在 webgrid Jquery 和 ASP.net MVC 中不起作用的复选框
【发布时间】：2018-09-27 07:54:50
【问题描述】：

我需要选中表格中的所有复选框，还需要分别选择每个行。为了实现这一点，我使用了这个post。

这是 Jquery 代码

@section Scripts{
    <script>
        $(document).ready(function () {

            // 1st replace first column header text with checkbox

            $("#checkableGrid th").each(function () {               
                if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
                    $(this).text('');
                    $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                    $(this).append("<span>Select All</span>");
                }
            });

            //2nd click event for header checkbox for select /deselect all
            $("#cbSelectAll").live("click", function () {
                var ischecked = this.checked;
                $('#checkableGrid').find("input:checkbox").each(function () {
                    this.checked = ischecked;
                });
            });


            //3rd click event for checkbox of each row
            $("input[name='ids']").click(function () {
                var totalRows = $("#checkableGrid td :checkbox").length;
                var checked = $("#checkableGrid td :checkbox:checked").length;

                if (checked == totalRows) {
                    $("#checkableGrid").find("input:checkbox").each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $("#cbSelectAll").removeAttr("checked");
                }
            });

        });
    </script>
}

我这样称呼它，

<div>
    @grid.GetHtml(
    tableStyle: "gridtable",
    htmlAttributes: new { id = "checkableGrid" },
    columns: grid.Columns
        (
    //Here I am going to add checkbox column
            grid.Column(
                format: @<text> <input type="checkbox" value="@item.CustomerID" name="ids" /> </text>,
                header: "{checkall}"
            ),
            grid.Column("CustomerID", "Customer ID"),
            grid.Column("CustomerName", "Customer Name"),
            grid.Column("Address", "Address"),
            grid.Column("City", "City"),
            grid.Column("PostalCode", "Postal Code")
        )
    )
</div>

每一行都可以单独选择，但我不能一次选择所有行。 Select All 复选框未显示，而是显示为 {checkall}

请有人帮我解决这个问题。谢谢。

【问题讨论】：

你并没有真正使用 jQuery 来发挥它的全部潜力，我建议 Learn jQuery。你的二传手应该只是$('#checkableGrid input:checkbox").prop("checked", $(this).prop("checked"));
您的网格行是否在 dom 加载后从 DOM 中插入/删除？如果不是，则没有理由使用live()，它应该只是on()（因为不推荐使用的版本：1.7，已删除：1.9，没有理由编写过时的代码）。
@Erik Philips 先生，如果可以的话，请给我完整的答案。我真的很喜欢这个。请
我不知道你的html输出是什么。
@Erik Philips 我和那个帖子（教程）一样。 db 表加载到网格。并且每一行都可以单独选择，但所有选择复选框都没有显示，而不是显示为{checkall}，就像这张图片i.imgur.com/JWyR4Rx.png

标签： jquery asp.net-mvc checkbox bulk

【解决方案1】：

使用change事件代替click，写成如下：

//2nd click event for header checkbox for select /deselect all

$(document).on('change', '#cbSelectAll', function () {
  if ($(this).prop('checked')) {
    $('#checkableGrid').find("input:checkbox").prop('checked', true);
  } else {
     $('#checkableGrid').find("input:checkbox").prop('checked', false);
  }
});

【讨论】：

但是标题行中仍然没有出现复选框来检查所有行，仍然有{checkall}
哦！明白了！您的标题复选框不见了！
是的 :(你能帮我解决这个问题吗，请检查这个demo.dotnetawesome.com/webgrid/…我是按照这个帖子做的，
你能给我团队查看器 ID 并通过吗？
糟糕，我正在使用大学电脑。我无法安装任何软件，