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 Page_Load(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 Table_2", 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

Published Saturday, July 13, 2013 3:19 PM by Rajneesh Verma

Comments

# re: Check All Check Boxes in List View with JQuery

Sunday, July 14, 2013 9:34 AM by Moe

Live has been removed since version 1.7 and removed in version 1.9 of jquery.  They recommend replacing with on... so you could do this

$(document).ready(function () {

$(document).on('click', "[id$='chkAllColor']", function () {

               $("[id$='chkColor']").attr('checked', this.checked);

           });

       });

# re: Check All Check Boxes in List View with JQuery

Wednesday, July 17, 2013 12:02 AM by Sandeep Bhadauriya

Nice Article.

Leave a Comment

(required) 
(required) 
(optional)
(required)