使用 JavaScript 检查和取消选中 DataGrid 中的复选框

• 下载源代码 - 4 KB

引言

我们经常会遇到在任何数据控件（如 repeater、datagrid、gridview、datalist 等）中放置复选框，并希望在客户端执行所有选中和取消选中操作的情况。这里提供一个使用 JavaScript 的解决方案。请注意：不同的数据控件可能需要进行一些修改。在这里，我是在 GridView 上完成这项工作的。

背景

要使用这段代码，我们需要具备 JavaScript 的基本知识，例如：

• 函数是如何定义的？
• 参数是如何传递到函数并使用的？
• 变量是如何定义的？

Using the Code

我在这里发布的示例是完全可用的，但如前所述，我使用了 GridView。但是，这段代码与 ASP.NET 中可用的任何 DataControl 兼容。我们只需要更改在 HeaderRow 和 ItemRow 中的 CheckBox 的 ClientClick 事件中传递的参数。

    //This function checks the HeaderCheckBox if all the ChildCheckBoxes are Selected
    //and deselects the HeaderCheckBox if even a single ChildCheckBox is DeSelected.
    function check(DataControlName,ChildCheckBoxName)
    { 
        var chkbox;
        //The value of i is provided according to childCheckBox control id
        //Please run the project and see the SOURCE FILE
        //For my project it is as below
        //<input id="GridView1_ctl02_chbxChild" type="checkbox" 
        //name="GridView1$ctl02$chbxChild" />
        var i=2;
        var c=2;	//The value of c is the same as that of i.
		//It is keeping track of the checked checkbox.
        var u=2;	//The value of u is the same as that of i.
		//It is keeping track of the unchecked checkbox.
        chkbox = document.getElementById(DataControlName + 
			'_ctl0' + i + '_' + ChildCheckBoxName);
        while(chkbox!=null)
        { 
            if(chkbox.checked==true)
                c=c+1;
            else
                u=u+1;
            i=i+1;
            chkbox = document.getElementById(DataControlName + 
			'_ctl0' + i + '_' + ChildCheckBoxName);
        }
        chkbox=document.getElementById("GridView1_ctl01_chbxHeader");
        if(i==c)
        {
            chkbox.checked = true;
        }
        if(i==u)
        {
            chkbox.checked = false;
        }
        if(i!=c)
            chkbox.checked = false;
}
    //This function selects all the ChildCheckBox if HeaderCheckBox is selected
    //and deselects all the ChildCheckBox if HeaderCheckBox is deselected
    function SelectOrUnselectAll_DC_CheckBox(DataControlName,obj,ChildCheckBoxName)
    { 
    //this function decides whether to check or uncheck all
        if(obj.checked==true) 
        {
            //Call subFunction for Select All ChildCheckBoxes
            SelectAll_DC_CheckBox(DataControlName,ChildCheckBoxName);
        }
        else 
        {
            //Call subFunction for DeSelect All ChildCheckBoxes
            UnselectAll_DC_CheckBox(DataControlName,ChildCheckBoxName);
        }
    } 
    //Function to check all CheckBoxes 
    function SelectAll_DC_CheckBox(DataControlName,objid)
    { 
        var chkbox; 
        var i=2; 

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

    }
    //Function to UnCheck all CheckBoxes
    function UnselectAll_DC_CheckBox(DataControlName,objid)
    { 
        var chkbox; 
        var i=2; 

        chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 

        while(chkbox!=null)
        { 
            chkbox.checked=false; 
            i=i+1; 
            chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 
        } 
    }

如何调用这些函数？

如果 CheckBox 放置在 <HeaderTemplate> 中，我们按如下方式调用该函数

onclick="SelectOrUnselectAll_DC_CheckBox('GridView1',this,'chbxChild')" 

如果 CheckBox 放置在 <itemtemplate> 中，我们按如下方式调用该函数

onclick="check('GridView1','chbxChild')" 

历史

• 2009 年 1 月 26 日：初始发布