Playing with ASP.NET List Controls using jQuery

List Controls are one of the most used form controls. And we all know that manipulating these controls from JavaScript always have 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 also will 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();

Lets also have a look at aspx code.

<div id="divcheckboxList">
        <asp:checkboxlist ID="chkItems" runat="server"></asp:checkboxlist>
     </div>

Here you can see I have put the CheckboxList in a div which Id is divcheckboxList.

This div will be very helpful while find 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 lets have a look at rendered code

<div>
<table id="chkItems" border="0">
<tbody>
<tr>
<td>&lt;input id="chkItems_0" type="checkbox" name="chkItems$0" /&gt;&lt;label for="chkItems_0"&gt;Tea&lt;/label&gt;</td>
</tr>
<tr>
<td>&lt;input id="chkItems_1" type="checkbox" name="chkItems$1" /&gt;&lt;label for="chkItems_1"&gt;Coffee&lt;/label&gt;</td>
</tr>
<tr>
<td>&lt;input id="chkItems_2" type="checkbox" name="chkItems$2" /&gt;&lt;label for="chkItems_2"&gt;Lemon Tea&lt;/label&gt;</td>
</tr>
<tr>
<td>&lt;input id="chkItems_3" type="checkbox" name="chkItems$3" /&gt;&lt;label for="chkItems_3"&gt;Expresso&lt;/label&gt;</td>
</tr>
<tr>
<td>&lt;input id="chkItems_4" type="checkbox" name="chkItems$4" /&gt;&lt;label for="chkItems_4"&gt;Cappuccino&lt;/label&gt;</td>
</tr>
</tbody>
</table>
</div>

Now w’ll see some most important operations with the control using jQuery.

Finding All Checkbox

$('#divcheckboxList').find('input:checkbox')

Finding all Selected CheckBox

$('#divcheckboxList').find('input:checkbox:checked')

Select all CheckBox

 $($('#divcheckboxList').find('input:checkbox')).attr('checked', true);

Remove Selection of all Selected CheckBox:

$('#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');

Display The Text of All Selected CheckBox

var selectedCheckBoxes = $('#divcheckboxList').find('input:checkbox:checked').each(function () {
                alert($(this).siblings('label').text());
            });

As you see the above code, you might get confused. But if you see the rendered code, you will get 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 aslo 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 help of jQuery and JavaScript.

Hope it will help the developers who are new with jQuery.

Cheers,

Brij

Brij

Brij is a Microsoft MVP in ASP.NET/IIS Category and a passionate dot.net developer. Having around 4.5 years of experiance in IT field, currently serving a MNC as a Sr. developer. He is alsoMVP at CodeProject He is a very passionated .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 recieved 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. He has a great passion to learn new Microsoft Technologies and love to share the Knowledge. Visit his Blog: Brij's arena of .NET Follow him at Twitter : @brij_bhushan