Highlight and Auto Select CheckBoxList Items With jQuery

Posted by: Malcolm Sheridan , on 10/10/2009, in Category jQuery and ASP.NET
Views: 27249
Abstract: The following article demonstrates how to use highlight and automatically select items in an ASP.NET CheckBoxList using jQuery.
Highlight and Auto Select CheckBoxList Items With jQuery
 
I, like many people, enjoy the flexibility and power that jQuery can give you. Suprotim Agarwal has a new eBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls: Pre-Order Now! that shows you fabulous tips and tricks on what you can do with jQuery. I thought I’d keep the jQuery examples coming so today I’ll show you how to highlight the selected item in an ASP.NET CheckBoxList, and then take it one step further by showing you how to automatically select items too. Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here
Okay let’s gets started. Open Visual Studio 2008 and create a new Web Application. The only page you need for this is the Default.aspx page. Add the following CheckBoxList to the page:
<form id="form1" runat="server">  
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="one"></asp:ListItem>
            <asp:ListItem Text="two"></asp:ListItem>
            <asp:ListItem Text="three"></asp:ListItem>
        </asp:CheckBoxList>
    </form>
It’s important to know how the CheckBoxList is rendered in the browser before you begin working with it. The following HTML is what is rendered in the browser:
<table id="CheckBoxList1" border="0"><tr><td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">one</label></td></tr><tr><td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">two</label></td></tr><tr><td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">three</label></td></tr></table>
To find each item, we need to look in the <table> tag for each item. But the text for each item is rendered in a <label> tag, so how do we highlight that easily? I’ll show you how. Add the following jQuery code to the <head> section of the page. Ideally JavaScript should go to a separate .js file, however for this example; I’ll keep it in the same page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Highlight A Selected CheckBox Item</title>
    <script language="javascript" type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("table[id$=CheckBoxList1] input").click(function() {
                if ($(this).next().is(".selected")) {
                    $(this).next().removeClass("selected").addClass("default");
                }
                else {
                    $(this).next().removeClass("default").addClass("selected")
                }
            });         
        });
    </script>
    <style type="text/css">
        .selected
        {
            background-color:Yellow;
        }
        .default
        {
            background-color:White;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">  
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="one"></asp:ListItem>
            <asp:ListItem Text="two"></asp:ListItem>
            <asp:ListItem Text="three"></asp:ListItem>
        </asp:CheckBoxList>
    </form>
</body>
</html>
In the code above, I am using the following\jQuery selector to find the CheckBoxList items:
 
$("table[id$=CheckBoxList1] input")
 
Notice how I am using id$=CheckBoxList1? The $= matches elements that have the specified attribute and it ends with a certain value. So if this code was in a master page, the function will still find the correct control. The selector finds the check box, and to highlight the text, I am using the next function. Next only returns the very next sibling for each element. I am using the is function to see if the item is selected:
 
if ($(this).next().is(".selected"))
 
If you run the code now and select an item, you’ll see the background change to yellow when it’s selected, and back to white when it’s not:
 
Background_Change
 
That’s a nice way to give the user visual feedback. Just for a bit of fun, I added code that would automatically select the check box when the user hovers their mouse over it:
 
$("table[id$=CheckBoxList1] input").hover(
function() {
            if ($(this).is(":checked")) {
                  $(this).attr("checked", "");
                   $(this).next().removeClass("selected").addClass("default")
} else {
                  $(this).attr("checked", "checked");
                  $(this).next().removeClass("default").addClass("selected");
}
});
 

This is a nice addition to your jQuery ensemble. The entire source code of this article can be downloaded over here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Sobin on Sunday, January 31, 2010 7:21 AM
Hi Malcom,

Pretty cool stuff! well done !

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook