DataGrid 中 Checkbox 的客户端验证

引言

本文提供了在 DataGrid 中添加复选框的代码，从而允许您使用 JavaScript 选中或取消选中 DataGrid 中的所有复选框。

背景

我花了很多时间在 Google 上搜索使用 JavaScript 选中/取消选中 DataGrid 中所有复选框的代码，真是费了很大的劲。我可以使用服务器端的方法来实现，但如果要在服务器端检查 DataGrid 中的所有记录，我需要从服务器重新加载网页；这听起来是不是很疯狂？所以最后，我坐下来编写了以下代码并解决了我的问题。我发布这篇文章是因为我发现很多人也在寻找相同的解决方案。

使用代码

考虑上面的图片。我在标题模板中添加了一个复选框，然后 DataGrid 的每一行都会显示该复选框。选中或取消选中 DataGrid 中的任何一个复选框，都会在整个 DataGrid 中显示相同的功能。

添加复选框的 HTML 代码如下所示

//
// this html tag adds checkbox to header
//
<asp:TemplateColumn> 
 <HeaderTemplate> 
  <Input id="checkAll" type=checkbox 
    onclick="DGSelectOrUnselectAll('DataGrid1',this,'chkDel')" > 
 </HeaderTemplate>
 //
 // this html tag adds checkbox to datagrid
 <ItemTemplate> 
  <asp:CheckBox ID="chkDel" Runat="server"></asp:CheckBox> 
 </ItemTemplate> 
</asp:TemplateColumn>

现在，让我们转向 JavaScript 实现选中/取消选中的功能

//-------------------------------------------------------
//this is to select or unselect the datagrid check boxes 

function DGSelectOrUnselectAll(grdid,obj,objlist){ 
//this function decides whether to check or uncheck all
    if(obj.checked) 
        DGSelectAll(grdid,objlist) 
    else 
        DGUnselectAll(grdid,objlist) 
} 
//---------- 
 
function DGSelectAll(grdid,objid){ 
//.this function is to check all the items
    var chkbox; 
    var i=2; 

    chkbox=document.getElementById(grdid + 
               '__ctl' + i + '_' + objid); 

    while(chkbox!=null){ 
        chkbox.checked=true; 
        i=i+1; 
        chkbox=document.getElementById(grdid + 
                   '__ctl' + i + '_' + objid); 
    } 

}//-------------- 

function DGUnselectAll(grdid,objid){ 
//.this function is to uncheckcheck all the items
    var chkbox; 
    var i=2; 

    chkbox=document.getElementById(grdid + 
               '__ctl' + i + '_' + objid); 

    while(chkbox!=null){ 
        chkbox.checked=false; 
        i=i+1; 
        chkbox=document.getElementById(grdid + 
                   '__ctl' + i + '_' + objid); 
    } 
}
//-------------------------------------------------------

完成了，你已经完成了。现在，你可以使用 JavaScript 选中/取消选中 DataGrid 中的所有复选框。

历史

这是我的第一篇帖子，希望对您有所帮助。