Advanced Search

multi checkbox list

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>Test jQuery infused cblist</title>
  8.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  9.     <script type="text/javascript">
  10.         var selectedBox = 0;
  11.         var multiBox = false;
  12.         var lastChecked = null;
  13.         $(document).ready(
  14.             function() {
  15.                 $(".multiplus input:checkbox").click(
  16.                     function() {
  17.                         if (!multiBox) {
  18.                             if ($(this).attr("checked")) {
  19.                                 $(lastChecked).attr("checked", false).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
  20.                                 lastChecked = this;
  21.                             }
  22.                         }
  23.                         if ($(this).attr("checked")) {
  24.                             $(this).parent().css({ "background-color": "#FFC", "font-weight": "bold" });
  25.                             selectedBox++;
  26.                         } else {
  27.                             $(this).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
  28.                             selectedBox--;
  29.                         }
  30.                     }
  31.                 );
  32.             }
  33.         );
  34.     </script>
  35. </head>
  36. <body>
  37.     <form id="form1" runat="server">
  38.     <div style="width:200px;height:300px;border:1px solid #999;overflow:scroll;">
  39.         <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="Title" DataValueField="RowID" DataSourceID="SqlDataSource1" CssClass="multiplus">
  40.         </asp:CheckBoxList>        
  41.     </div>
  42.     </form>
  43. </body>
  44. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.