You all must be knowing, I am a fan of jQuery. The kind of neat and clean code and the power provided by jQuery at Client side scripting is unmatchable.
List Controls are one of the most used form controls. And we all know that manipulating these controls from JavaScript has always been a tough task.
In this post, I’ll be discussing about accessing List controls and manipulating it with the help of jQuery. Hope you all like it and will be able to apply with other controls as well.
Let’s discuss it for CheckBoxList
. I have a checkbox
list and for demonstration also, I have created a sample. For this sample, I have created a dictionary
with few Items and set it as a datasource
of CheckboxList
as:
Dictionary dictItems = new Dictionary();
dictItems.Add(1, "Tea");
dictItems.Add(2, "Coffee");
dictItems.Add(3, "Lemon Tea");
dictItems.Add(4, "Expresso");
dictItems.Add(5, "Cappuccino");
chkItems.DataSource = dictItems;
chkItems.DataTextField = "Value";
chkItems.DataValueField = "Key";
chkItems.DataBind();
Let's also have a look at the aspx code.
<div id="divcheckboxList">
<asp:checkboxlist ID="chkItems" runat="server"></asp:checkboxlist>
</div>
Here you can see that I have put the CheckboxList
in a div
whose Id
is divcheckboxList
.
This div
will be very helpful while finding the Items
in CheckboxList
because as you know the narrow search criteria we will pass to the jQuery, it will be as much faster.
Now let's have a look at the rendered code:
<div id="divcheckboxList">
<table id="chkItems" border="0">
<tbody>
<tr>
<td><input id="chkItems_0" type="checkbox" name="chkItems$0" />
<label for="chkItems_0">Tea</label></td>
</tr>
<tr>
<td><input id="chkItems_1" type="checkbox" name="chkItems$1" />
<label for="chkItems_1">Coffee</label></td>
</tr>
<tr>
<td><input id="chkItems_2" type="checkbox" name="chkItems$2" />
<label for="chkItems_2">Lemon Tea</label></td>
</tr>
<tr>
<td><input id="chkItems_3" type="checkbox" name="chkItems$3" />
<label for="chkItems_3">Expresso</label></td>
</tr>
<tr>
<td><input id="chkItems_4" type="checkbox" name="chkItems$4" />
<label for="chkItems_4">Cappuccino</label></td>
</tr>
</tbody>
</table>
</div>
Now we’ll see some most important operations with the control using jQuery.
$('#divcheckboxList').find('input:checkbox')
- Finding all selected
CheckBox
es:
$('#divcheckboxList').find('input:checkbox:checked')
- Select all selected
CheckBox
es:
$($('#divcheckboxList').find('input:checkbox')).attr('checked', true);
- Remove Selection of all Selected
CheckBox
es:
$('#divcheckboxList').find('input:checkbox:checked').removeAttr('checked');
- Adding event to each
CheckBox
:
$('#divcheckboxList').find('input:checkbox').click(function()
{
showvalue(this);
});
}
- Removing event to each
CheckBox
:
$('#divcheckboxList').find('input:checkbox').unbind('click');
- Getting Text of selected
CheckBox
:
var selectedCheckBoxes = $('#divcheckboxList').find
('input:checkbox:checked').each(function () {
alert($(this).siblings('label').text());
});
As you see in the above code, you might get confused. But if you see the rendered code, you will get to know that every Checkbox
is rendered as two controls, one Checkbox
input control and another label which holds the text of Checkbox
. That’s why to get the text of Checkbox
, I had to find the sibling label of the checkbox
.
The same will also work for RadioButtonList
.
Note: Here I have presented a way to work with List controls and demonstrated it using jQuery. There could be many more ways to do the same with the help of jQuery and JavaScript.
Hope it will help the developers who are new to jQuery.
Cheers,
Brij
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.
He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.
He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.
He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.
Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.
Visit his Blog:
Code Wala
Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008