Check/Uncheck all items in a CheckBoxList using Javascript

In my previous article show how to check/uncheck all items in a CheckBoxList using ASP.NET. Today we do the same using javascript.

Note: If you use the master page in your application remember that you need to use 'Control.ClientID'. Because When the page is rendered in the browser, the content and master pages get merged into a single page. This means that the IDs for the controls get renamed. ASP.NET renames the IDs to prevent naming conflicts. Now to handle the renamed controls, ASP.NET provides the ‘Control.ClientID’ and ‘Control.UniqueID’ to get the renamed ID’s.


Use the following code at the Page load event to add items to the CheckBoxList programmatically:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
cblTest.Items.Add(new ListItem("Dhaka", "Dhaka"));
cblTest.Items.Add(new ListItem("Chittagong", "Chittagong"));
cblTest.Items.Add(new ListItem("Shylet", "Shylet"));
cblTest.Items.Add(new ListItem("Rajshahi", "Rajshahi"));
}
}

The prototype of our javascript function will be the following :
function CheckBoxListSelect(<pass the control>, <state i.e true or false>)
{
// Our code will come here
}

Now drag and drop two asp:button which are named as "CheckedAll" and "UnCheckedAll" respectively.

In this event, we will call the javascript function and pass the respective checkboxlist controls and the state which will describe ‘true’ for CheckedAll button or ‘false’ for UnCheckedAll button.

Check All:
For Check all write the following code in the onClientClick event of "CheckedAll" button
<asp:Button ID="btnCheckAll" runat="server" Text="CheckedAll" OnClientClick="javascript: CheckBoxListSelect ('<%= cblTest.ClientID %>',true)"


Uncheck All:
For UnCheck all write the following code in the Click Event of "UnCheckedAll" button
<asp:Button ID="btnUnCheckAll" Text="UnCheckedAll" runat="server" OnClientClick="javascript: CheckBoxListSelect ('<%= cblTest.ClientID %>',false)"


JavaScript function:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
function CheckBoxListSelect(cbControl, state)
{
var chkBoxList = document.getElementById(cbControl);
var chkBoxCount= chkBoxList.getElementsByTagName("input");
for(var i=0;i<chkBoxCount.length;i++)
{
chkBoxCount[i].checked = state;
}

return false;
}
</script>
// ASP.NET Controls are placed here
</asp:Content>


In this javascript function, we accept two parameters, the checkboxlist control and the state (i.e true or false) of each checkbox, that we would like it to be.Since asp.net renders each checkbox as an input tag, what we are really doing over here is first getting the checkboxlist control using document.getElementById(cbControl) and then counting the number of <input> tags inside that control. Once we get the count, we use a loop to set the state of each control.