带有复选框列的 GridView。客户端脚本取消选中除当前复选框之外的所有复选框

Question

我正在将类型化列表动态绑定到 GridView 控件。 网格视图控件位于一个 asp.net 页面中，该页面包装在一个 asp:UpdatePanel (Ajax) 中。 第一列包含一个复选框控件。 此列中只能选中一个复选框。 如果用户选中一个复选框，则必须取消选中所有其他复选框。

我正在尝试使用客户端脚本来实现这一点，但没有成功。 在 GridView 的 RowDatabound 事件的处理程序中，已尝试将属性添加到单元格中包含的 CheckBox。

protected void ErrorGridView_RowDatabound(object sender, GridViewRowEventArgs e)
  {

     if (e.Row.RowType == DataControlRowType.DataRow)
     {

        if(e.Row.Cells[0].HasControls())
        {
           foreach (var control in e.Row.Cells[0].Controls)
           {
              if (!(control is CheckBox)) continue;

              var checkBox = (CheckBox)control;
              checkBox.Attributes.Add("CheckedChanged", "errorCheckChanged");
              return;
           }
        }           
     }

客户端脚本在 Page_Load 事件处理程序上注册 - 如下：

if (!Page.ClientScript.IsClientScriptBlockRegistered("ErrorsCheckBoxHandler")) Page.ClientScript.RegisterClientScriptBlock(GetType(),"ErrorsCheckBoxHandler", "function errorCheckChanged() {window.alert(\"here\"); }");

问题是当任何复选框被点击时该函数没有被调用。希望有人可以阐明我在这里缺少什么？

此外，取消选择目标列中选中的任何其他复选框的最佳方法是什么？

我的计划是将“errorCheckChanged”函数更改为采用一个参数（复选框对象）。我会更改上面的代码；添加到属性添加签名：

checkBox.Attributes.Add("CheckedChanged", "errorCheckChanged(this)");

希望我能够：
(1) 判断复选框状态是否为'checked'。 （如果已“选中”，则继续执行以下步骤）
（2）找到checkbox parent（=cell），然后确定受影响的GridView Row。
(3) 遍历所有行，将复选框设置为“Checked=false”，当前行除外。

这会被认为是正确的方法吗？

谢谢

授予

Answer 1

您还可以在设计时添加checkbox 的onclick 事件。

<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" onclick="errorCheckChanged(this)" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>

JavaScript 看起来像

function errorCheckChanged(chkBox){  
    var gridView = document.getElementById('<% =GridView1.ClientID %>');   
    var Elements = gridView.getElementsByTagName('input');   

    for(var i = 0; i < Elements.length; i++){
        if(Elements[i].type == 'checkbox' && Elements[i].id != chkBox.id && chkBox.checked)
            Elements[i].checked = false;
    }
}

Answer 2

使用onclick 属性而不是CheckChanged。我不认为这是一个有效的 js 事件。所以

checkBox.Attributes.Add("onclick", "errorCheckChanged(this);");

获取您可以执行的复选框列表

js:

var grid = document.getElementById('<% =GridView1.ClientID %>');
var checks = grid.getElementsByTagName('input');

您必须检查type 属性以确保它是一个复选框，或者您可以为所有复选框指定一个特定的类以对它们进行逻辑分组。无论如何，您可以对照列表检查您的 clicked 元素 ID。