The IT World

• Download DataControlCheckBoxesUsingJavaScript - 4 KB

Introduction

Very often we face a situation where we have placed checkboxes inside any data control like, repeater, datagrid, gridview, datalist etc and we want to perform all the check, uncheck action on client side. Here is the solution, using Java Script. Note: Different data control may need some changes. Here I have carried out my work on GridView.

Background

To use this code, we should have a basic knowledge of Java Script i.e. how the Function is defined? how the Parameter in the function is passed and used?, how the variable is defined?

Using the code

However the example I have posted here is fully functioning, but as I have stated earlier that I have used GridView, but the code is compatible with any DataControl available in ASP.NET. The all we need is to change the parameter that we are passing on the ClientClick of the CheckBox in HeaderRow and CheckBox in ItemRow.

//This function check the HeaderCheckBox if all the ChildCheckBox is Selected
    //and deselect 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
        //For it 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 same that of i.It is of keeping track of checked checkbox.
        var u=2;//The value of u is same that of i.It is of keeping track of 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 select all the ChildCheckBox if HeaderCheckBox is selected
    //and deselect 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); 
        } 
    }

How to call these functions?

In the CheckBox placed in <HeaderTemplate>, we call the function onclick="SelectOrUnselectAll_DC_CheckBox('GridView1',this,'chbxChild')" yand in the CheckBox placed in <ItemTemplate>, we call the function onclick="check('GridView1','chbxChild')"