Check all CheckBoxes in Page

Question

I want to select all row of all pages in asp.net grid view when select all check box is checked using jquery,my code selecting the value of only first page.

<script type="text/javascript">

           function SelectAllCheckboxes(chk) {
                debugger;

                $("[id*=chkSelectAll]").live("click", function () {
                    var chkHeader = $(this);
                    $("#<%=gvUnPaidInvoiceDetail.ClientID%> tr").each(function () {
                        var grid = $(this).closest("table");

                        $("[id*=chkSelect]", grid).each(function () {
                            if (chkHeader.is(":checked")) {
                                $(this).attr("checked", "checked");

                            } else {
                                $(this).removeAttr("checked");

                            }
                        });
                    });
                });
            }
        </script>

<asp:TemplateField HeaderText="Select">
  <HeaderTemplate>
   <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="SelectAllCheckboxes(this);" />
 </HeaderTemplate>

 <ItemTemplate>
   <asp:CheckBox ID="chkSelect" runat="server" />
 </ItemTemplate>
</asp:TemplateField>

As of jQuery 1.7, the `.live()` method is deprecated. Use `.on()` — Nagaraj S, May 25 '15 at 06:27
its selecting only rows of first page,my client want to get all rows of all page get selected in grid when select all check box is checked — Adesh Gaonkar, May 25 '15 at 06:28
Generally this is right manner to select only first page's row not all page's row bcoz currently user see only first page... — Ghanshyam Lakhani, May 25 '15 at 06:28
but my client want to print all record that are binding to grid,on selecting all check box — Adesh Gaonkar, May 25 '15 at 06:31
Nagaraj S its selecting only rows of first page,my client want to get all rows of all page get selected in grid when select all check box is checked — Adesh Gaonkar, May 25 '15 at 06:32
@AdeshGaonkar: what you mean to say 1st page ? are you talking about pagination .i. 1st page index etc — Satinder singh, May 25 '15 at 06:35
Are you looking for something like this? [GridView Select All with Paging](http://forums.asp.net/t/1377065.aspx?GridView+Select+All+with+Paging) — Shubh, May 25 '15 at 06:36
@Satinder singh 1st means pagination in grid,where first page displays only 10 records — Adesh Gaonkar, May 25 '15 at 06:38
if its select all. why don't you return all the data, instead of checking for check boxes? — Monie corleone, May 25 '15 at 06:47

score 1 · Answer 1 · answered May 25 '15 at 06:48

use this js for all checkbox check and uncheck

$(document).ready(function () {
$('#MainContent_repCustomers_chkCheckAll').click(function () {
    if ($(this).is(':checked')) {
        $("div#customer table tbody tr td 
            input:[type='checkbox']:not(:checked)").each(function () {
            $(this).attr('checked', true);
        });
    }
    else {

        $("div#customer table tbody tr td 
                input:[type='checkbox']:checked").each(function () {
            $(this).attr('checked', false); 
        });
    }
});
});

score 0 · Answer 2 · edited May 23 '17 at 12:30

As you have used paging, so at any time only 10 records (pagesize of grid) exist.

So when you go to 2nd page, its show the 2nd page, but actually in the grid it have only from 11 to 20 actual records.

So if you want to get all other page's data to select eigher remove paging or you have to maintain the click of record in javascript variable as a array.

Without paging is good, you just put your grid into div and give the style or by css as

<div stype ='overflow-x=auto; height: 500px'> <your asp Grid> </div>

If you want with paging create a array as :

How can I create a two dimensional array in JavaScript?

On click store the id with add or remove from array.

For add: http://www.w3schools.com/jsref/jsref_splice.asp

For remove :How do I remove a particular element from an array in JavaScript?

Satinder singh · Answer 3 · 2015-05-25T10:29:30.337

0

No need to check for each tr on client side, as you want all data whenever user click on header checkbox.

   <asp:CheckBox ID="chkSelectAll" runat="server" Text=""   
    AutoPostBack="true" OnCheckedChanged="chkSelectAll_CheckedChanged"  />

protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ChkBoxHeader = (CheckBox)Grd.HeaderRow.FindControl("chkSelectAll");
    if (ChkBoxHeader.Checked)
     {
          // Bind Your gridview without pagination
          GridView1.AllowPaging = False;
          BindGridView();
          GridView1.AllowPaging = True;
     }


}

public void   BindGridView(){
     // code to bind gridview
}

edited May 25 '15 at 10:29

answered May 25 '15 at 07:11

Satinder singh

9,340
15
53
93

@AdeshGaonkar: I don't know whether it's good coding or bad coding, but with paging you won't able to get all Rows that's am sure. You can do a trick like 1st enable paging then after bind disable Paging check my updated answer – Satinder singh May 25 '15 at 10:29
but when grid rebinds the check box become unchechked – Adesh Gaonkar May 25 '15 at 10:59

Sami · Answer 4 · 2015-05-27T13:19:58.707

<asp:TemplateField HeaderText="Select">
  <HeaderTemplate>
   <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="SelectAllCheckboxes(this);" />
   <!--I am not sure if above function called. You might need onClientClick
   insted of onclick-->
 </HeaderTemplate>

 <ItemTemplate>
   <asp:CheckBox ID="chkSelect" cssClass='chkSelect' runat="server" />
   <!-- I made a change to add cssClass attribute because using single ID 
    for multiple elements is not a good approach use class instead-->
 </ItemTemplate>
</asp:TemplateField>

<script type="text/javascript">
function SelectAllCheckboxes()
{
    alert("called");
    // if you want to really check/uncheck all then simply

    //$('.chkSelect').attr("checked","checked"); and
    //$('.chkSelect').removeAttr("checked");

    // But it seems you want to toggle so
     var chekedBoxes = $('.chkSelect:checked');
     var unchekedBoxes = $('.chkSelect:not(:checked)');
     chekedBoxes.removeAttr("checked");
     unchekedBoxes.attr("checked", "checked");        
}
</script>

$('.chkSelect').each(i, function() u r calling i in function where u have declared it and wht is the use of tht — Adesh Gaonkar, May 26 '15 at 07:21
I wasn't wrong here but useless.. I kept only non iterative solution. If you follow the comments in post hopefully you will get it fixed.. Once you really reach in this function.. mean alert works — Sami, May 27 '15 at 13:22

Check all CheckBoxes in Page

4 Answers4