Home > ASP.NET, JQuery > Single selection Checkboxlist in Asp.net with the help of JQUERY

Single selection Checkboxlist in Asp.net with the help of JQUERY


INTRODUCTION
As we know CheckBoxList asp.net server control that comes under “System.Web.UI.WebControls” namespace allow multi selection . In this Small post I will show you how to make single selection in CheckBoxList asp.net server control using J Query.

HTML for Control
When Binding dynamically from database

<asp:CheckBoxList ID="chkTest" runat="server"
RepeatDirection="Vertical"
RepeatColumns="1">
</asp:CheckBoxList>

When it is static

<asp:CheckBoxList ID="chkTest" runat="server"
RepeatLayout=Flow  RepeatDirection="Horizontal" Width="99%">
<asp:ListItem Text="Test1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Test2" Value="2"></asp:ListItem>
<asp:ListItem Text="Test3" Value="3"></asp:ListItem>
<asp:ListItem Text="Test4" Value="4"></asp:ListItem>
</asp:CheckBoxList>

JQuery for this

<script type="text/javascript">
$(document).ready(function() {
var checkboxes = $('#<%=chkTest.ClientID %>').find('input:checkbox');
checkboxes.click(function() {
var selectedIndex = checkboxes.index($(this));

var items = $('#<% = chkTest.ClientID %> input:checkbox');
for (i = 0; i < items.length; i++) {
if (i == selectedIndex)
items[i].checked = true;
else
items[i].checked = false;
}
});
});
</script>

I hope . you will find it helpfull.

Advertisements
Categories: ASP.NET, JQuery Tags: ,
  1. August 2, 2012 at 6:56 AM

    Why do you wanna do that? Why don’t use Radiobutton list..

    • December 5, 2012 at 11:33 AM

      Yes Virendra this can be done using what u said ,In project all feature was implemented using check box so instead of replacing all control type it is done like that.

  2. Robin Banga
    August 2, 2012 at 1:32 PM

    Small correction. you are fetching checkbox collection twice. Once in variable checkboxes next time in items. We can do same thing from one collection :

    $(document).ready(function () {

    //var checkboxes = $(‘#cblTest’).find(‘input:checkbox’);—-NOT NEEDED
    var checkboxes = $(‘#cblTest input:checkbox’);

    checkboxes.click(function () {

    var selectedIndex = checkboxes.index($(this));

    for (var i = 0; i < checkboxes.length; i++) {
    if (i == selectedIndex)
    checkboxes[i].checked = true;
    else
    checkboxes[i].checked = false;
    }

    });

    });

  3. Robin Banga
    August 2, 2012 at 1:34 PM

    Nice post.. Reply helpful..keep posted

    • August 3, 2012 at 10:08 AM

      Thanks for feedback Robin Banga, yes sure, i have lot to post …

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: