In this article I will explain with an example, how to use JavaScript with CheckBoxList in ASP.Net.
This article will explain how to validate CheckBoxList to check whether its items are selected or not and also how to get the Selected Items i.e. Selected Text and Value of the CheckBoxList using JavaScript in ASP.Net.
HTML Markup
The following HTML Markup consists of an ASP.Net CheckBoxList.
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:CheckBoxList>
Concept
The ASP.Net CheckBoxList control is rendered as an HTML Table with HTML CheckBoxes as shown below.
![Using JavaScript with ASP.Net CheckBoxList Control]()
Hence we will need to write a script which will loop through all the controls (CheckBoxes) in the generated HTML table in order to validate or get the selected Items Text.
The Text part of the CheckBoxList is available in the HTML Label element.
![Using JavaScript with ASP.Net CheckBoxList Control]()
Validating CheckBoxList using JavaScript in ASP.Net
The following HTML Markup consists of an ASP.Net CheckBoxList and a Button.
The Button has been assigned an OnClientClick event handler, which makes a call to the Validate Javascript function.
Inside the Validate JavaScript function, first the reference of the CheckBoxList is determined and then all the CheckBoxes inside the CheckBoxList are referenced.
Then a loop is executed over the referenced CheckBoxes and each CheckBox is validated whether it is checked or not.
If none of the CheckBoxes is checked, then a JavaScript Alert Message Box is displayed with a message informing the user, that he has to select at least single CheckBox from the ASP.Net CheckBoxList.
<script type = "text/javascript">
var atLeast = 1
function Validate()
{
var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var counter=0;
for (var i = 0;i < checkbox.length; i++)
{
if (checkbox[i].checked)
{
counter++;
}
}
if(atLeast > counter)
{
alert("Please select atleast " + atLeast + " item(s)");
return false;
}
return true;
}
</script>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:Button ID="Button1" runat="server" Text="Validate" OnClientClick="return Validate()" />
Getting Selected Items Text of CheckBoxList using JavaScript in ASP.Net
The following HTML Markup consists of an ASP.Net CheckBoxList and a Button.
The Button has been assigned an OnClientClick event handler, which makes a call to the GetSelectedItem JavaScript function.
Inside the GetSelectedItem JavaScript function, first the reference of the CheckBoxList is determined and then all the CheckBoxes and Label elements inside the CheckBoxList are referenced.
Then a loop is executed over the referenced CheckBoxes and each CheckBox is validated whether it is checked or not.
If the CheckBox is checked, then the inner HTML of the Label element (i.e. the Selected Text) is displayed using JavaScript Alert Message Box.
<script type="text/javascript">
function GetSelectedItem()
{
var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var label = CHK.getElementsByTagName("label");
for (var i = 0; i < checkbox.length; i++)
{
if (checkbox[i].checked)
{
alert("Selected = " + label[i].innerHTML);
}
}
return false;
}
</script>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:Button ID="Button2" runat="server" Text="SelectedItem" OnClientClick="return GetSelectedItem()" />
Download
