GridView中的JQuery CheckAll答案

【问题标题】：JQuery CheckAll in GridViewGridView中的JQuery CheckAll
【发布时间】：2023-04-02 09:02:02
【问题描述】：

我在 .ascx 上有一个 GridView。我在列的标题模板中有一个 asp:Checkbox CheckAll 复选框，然后在 ItemTemplate 中有一个复选框。我想添加该功能，以便当我选中 Header 中的复选框时，它将选中或取消选中 GridView 中的所有复选框。

我如何用 JQuery 做到这一点？然后，我还想添加反向功能，以便当我取消选中 GridView 中的复选框时，它会取消选中 Header 中的复选框。

【问题讨论】：

标签： jquery gridview checkbox

【解决方案1】：

您可以使用 Checkbox 'CheckAll' ID 和 rows' 类。

例如，您可以拥有一个控件 ID“chkSelectAllNone”（请注意，这将在客户端中更改为“Ctl001_chkSelectAllNone”之类的内容），并且您可以使用 css 类“select-row”分配行类。

然后，在 aspx 中创建一个 jQuery 脚本（或从后面的代码中编写）来处理 Select All/None 切换，如下所示：

$("#<%= chkSelectAllNone.ClientID %>").click(function(){
$(".select-row").attr("checked", $("#<%= chkSelectAllNone.ClientID %>").attr("checked"));
});

希望对你有帮助。

【讨论】：

将这是否真的返回 ClientID，因为此控件位于 GridView 的 HeaderTemplate 中，而不是在 GridView 之外声明？
这里的事实是，您需要该复选框的客户端 ID 才能绑定点击事件并执行 javascript。将该字符串转换为为您提供客户端控件 ID 的任何内容。

【解决方案2】：

我不确定 GridViews 是否呈现 th，但如果他们这样做应该会让你接近：

$("th :radio").click(function() {
  if($(this).is(":checked")) {
    $("td :radio").attr("checked", "checked");
  }
});

$("td :radio").click(function() {
  var attr = $("td :radio").not(":checked").length ? "" : "checked";
  $("th :radio").attr("checked", attr);
});

【讨论】：