Playing with List Controls using jQuery

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.

• Finding all Checkboxes:

//This will return the array of all the checkboxes inside the div divcheckboxList
$('#divcheckboxList').find('input:checkbox')

• Finding all selected CheckBoxes:
  C#

  //This will return the array of all the checkboxes inside the div divcheckboxList
  $('#divcheckboxList').find('input:checkbox:checked')

• Select all selected CheckBoxes:
  C#

  //This finds all the checkbox in the div and adds the 
  //checked attribute to each checkbox which shows every checkbox as checked
   $($('#divcheckboxList').find('input:checkbox')).attr('checked', true);

• Remove Selection of all Selected CheckBoxes:
  C#

  //Find all checkBoxes and deselect it by removing checked 
  //attribute to each checkbox (in the div divcheckboxList)
  $('#divcheckboxList').find('input:checkbox:checked').removeAttr('checked');

• Adding event to each CheckBox:
  C#

  //Find all checkBoxes and attach a Click function (in the div divcheckboxList)
             $('#divcheckboxList').find('input:checkbox').click(function()
                  {
                      showvalue(this);
                  });
              }
  

• Removing event to each CheckBox:
  C#

  //Find all the checkBoxes and remove the attached Click function 
  //(in the div divcheckboxList)
  $('#divcheckboxList').find('input:checkbox').unbind('click');

• Getting Text of selected CheckBox:
  C#

  //Find all the selected checkbox and show the text of the 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