Check All Check Boxes in List View with JQuery

Hi, Its quite simple to use check all checkboxes in List view using JQuery.

Use the below JQuery function to check all check boxes:

   1: $(document).ready(function () {
   2:            $("[id$='chkAllColor']").live('click', function () {
   3:                $("[id$='chkColor']").attr('checked', this.checked);
   4:            });
   5:        });

Designer code is as below:

   1: <html xmlns="http://www.w3.org/1999/xhtml">
   2: <head runat="server">
   3:     <title></title>
   4:     <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
   5:     <script language="javascript" type="text/javascript">
   6:         $(document).ready(function () {
   7:             $("[id$='chkAllColor']").live('click', function () {
   8:                 $("[id$='chkColor']").attr('checked', this.checked);
   9:             });
  10:         });
  11:     </script>
  12: </head>
  13: <body>
  14:     <form id="form1" runat="server">
  15:         <div>
  16:             <asp:ListView ID="lswLoan" runat="server" ViewStateMode="Disabled" >
  17:                 <LayoutTemplate>
  18:                             <table class="table">
  19:                                 <tr>
  20:                                     <th>
  21:                                         <asp:CheckBox ID="chkAllColor" ToolTip="Select All" ClientIDMode="Static" runat="server" />                                          
  22:                                     </th>
  23:                                     <th>ID</th>
  24:                                     <th>Color</th>                           
  25:                                 </tr>
  26:                                 <tr id="itemPlaceholder" runat="server">
  27:                                 </tr>
  28:                             </table>
  29:                 </LayoutTemplate>
  30:                 <ItemTemplate>
  31:                     <tr>
  32:                         <td>
  33:                             <asp:CheckBox ID="chkColor" runat="server" ClientIDMode="Static"  />
  34:                         </td>
  35:                         <td>
  36:                             <%# Eval("id") %>
  37:                         </td>
  38:                         <td>
  39:                             <%# Eval("color") %>
  40:                         </td>
  41:                     </tr>
  42:                 </ItemTemplate>                
  43:             </asp:ListView>
  44:         </div>
  45:     </form>
  46: </body>
  47: </html>

Don’t forget to use ClientIDMode="Static" for each checkbox control.

And the code behind:

   1: SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString1"].ConnectionString);
   2:    protected void PageLoad(object sender, EventArgs e)
   3:    {
   4:        if (!IsPostBack)
   5:        {
   6:            fillgrid2();
   7:        }
   8:    }
   9:    private void fillgrid2()
  10:    {
  11:        SqlDataAdapter da = new SqlDataAdapter("select * from Table2", con);
  12:        DataTable dt = new DataTable();
  13:        da.Fill(dt);
  14:        lswLoan.DataSource = dt;
  15:        lswLoan.DataBind();
  16:    }
That’s it !

Output is as follow:

CheckAllCheckboxes

2 Comments

Comments have been disabled for this content.