CheckBox List Select All/UnSelect All in C#
Most of the time developers used to play around with checkbox list control,select all, unselect all, functionalities and most of the times fuming their head, with the variety of options it has.
Like,unchecking a child checkbox manually ,should uncheck the checkbox header,if all other child checkboxes are checkbox. Another point is to select the header checkbox, if the child checkboxes are checked manually.
All these we can achieve by a simple Javascript function.
Example:
In the example given, there is a checkbox list,we have to call the javascript function from the code behind file(aspx.cs) page.
Here I will explain you the javascript function with inline comments for your easy understanding. The checkbox list and the index are the parameters, so that we can do the required functionality according to the index.
For eg:If index is 0 we have to do either selectall or unselect all. For any other indices we have to update the header checkbox state to either checked/unchecked.
WebForm1.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CheckboxSelectAllExp.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CheckBox List Select All/UnSelect All in C#</title>
<script type="text/javascript">
function SelectDeSelectAll(cbl, index) {
if (cbl == null) return;
var elements = cbl.getElementsByTagName("input");
if (elements == null) return;
//Here we are performing the selectall if the checkboxheader is checked and deselectall if the checkboxheader is unchecked.
if (index == 0) {
if (elements[index].checked == true) {
for (i = 0; i < elements.length; i++) {
elements[i].checked = true;
}
}
else {
for (i = 0; i < elements.length; i++) {
elements[i].checked = false;
}
}
}
//Here if any other index other than 0 is checked or unchecked,we are looping through the
//Checkboxlist to find the count of checkboxes unchecked or checked and performing the
//Header checkbox check and uncheck.
else {
var checkboxcount = 0;
for (i = 1; i < elements.length - 1; i++) {
if (elements[i].checked == false) {
checkboxcount++;
}
}
if (checkboxcount > 0) {
elements[0].checked = false;
}
else if (checkboxcount == 0) {
elements[0].checked = true;
}
}
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="chklist" runat="server"></asp:CheckBoxList>
</div>
</form>
</body>
</html>
Here is the code in the code behind page to call the Javascript function
WebForm1.aspx.cs:
using System;
namespace CheckboxSelectAllExp
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
chklist.Items.Add("select All");
chklist.Items.Add("Item1");
chklist.Items.Add("Item2");
chklist.Items.Add("Item3");
chklist.Items.Add("Item4");
for (int i = 0; i < chklist.Items.Count; i++)
{
chklist.Items[i].Attributes.Add("onClick", "SelectDeSelectAll(" + chklist.ClientID + "," + i.ToString() + ");");
}
}
}
}
Please find below link for source code.
