Check and uncheck header checkbox

Question

3.67/5 (2 votes)

See more:

--scenario

header checkbox is there..

1)if i check the header check box ,,,all the child checkbox will be checked
2)if uncheck all will be unchecked

3)if everything is checked..if i uncheck one child checkbox...header checkbox will be unchecked
4)if i check one by one all the child checkbox....header checkbox will be checked.

1,2 and 3 are working fine. 4th is not working
chkb1 is header checkbox
chkb2 is child checkbox

<script type="text/javascript">
    $(function(){
    
            $('[id*=chkb1]').click(function(){
            $("[id*='chkb2']").attr("checked",this.checked);
             });  
                    $('[id*=chkb2]').click(function(){
                    if($('[id*=chkb2]').length== $("[id*='chkb2']: checked").length)
                     {                    
                     $("[id*='chkb1']").attr("checked",this.checked);                     
                     }
                     else
                     {                   
                      $("[id*='chkb1']").removeAttr("checked");                     
                     }           
                    }); 
    });</script>

----gridview having checkbox

XML

<asp:GridView ID="GridZeroApprovedKm" AllowPaging="true" runat="server" AutoGenerateColumns="false"
                   DataKeyNames="Address_id" OnRowCancelingEdit="GridZeroApprovedKm_RowCancelingEdit"
                   OnRowDataBound="GridZeroApprovedKm_RowDataBound" OnRowDeleting="GridZeroApprovedKm_RowDeleting"
                   OnRowEditing="GridZeroApprovedKm_RowEditing"
                   OnRowUpdating="GridZeroApprovedKm_RowUpdating"
                   onpageindexchanging="GridZeroApprovedKm_PageIndexChanging">
                   <SelectedRowStyle CssClass="ResultSelectedRow" BackColor="Cyan" />
                   <Columns>
                       <asp:TemplateField HeaderText="Select All">
                           <HeaderTemplate>
                               <asp:CheckBox ID="chkb1" runat="server" Text="Select All" OnCheckedChanged="sellectAll"
                                   AutoPostBack="true" />
                           </HeaderTemplate>
                           <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                           <ItemTemplate>
                               <asp:CheckBox ID="chkb2" runat="server" OnCheckedChanged="sellectAllChildcheckbox" Text="Select" AutoPostBack="true" />
                           </ItemTemplate>
                           <ItemStyle HorizontalAlign="center" />
                       </asp:TemplateField>

---is this syntax incorrect

if($('[id*=chkb2]').length== $("[id*='chkb2']: checked").length)

Posted 13-Sep-13 5:51am

anurag19289

Updated 14-Sep-13 9:07am

v5

Add a Solution

3 solutions

Solution 1

Try below one.May be worked.

XML

<script type="text/javascript">
    $(function(){

            $('[id*=chkb1]').change(function(){
                 var self=this;
            $("[id*='chkb2']").prop("checked",self.checked);
             });
                    $('[id*=chkb2]').change(function(){
                         var self=this;
                    if($('[id*=chkb2]').length== $("[id*='chkb2']: checked").length)
                     {
                     $("[id*='chkb1']").prop("checked",self.checked);
                     }
                  });
    });</script>

I hope this will help to you.

Posted 13-Sep-13 21:05pm

Sampath Lokuge

Solution 3

This is the solution

<script type="text/javascript">
$(function(){
$('[id*=chkb1]').click(function(){
$("[id*='chkb2']").attr("checked",this.checked);
});

$('[id*=chkb2]').click(function(){
var grid = $(this).closest("table");
var chkHeader = $("[id*=chkb1]", grid);

if (!$(this).is(":checked"))
{
chkHeader.removeAttr("checked");
}

else
{
if ($("[id*=chkb2]", grid).length == $("[id*=chkb2]:checked", grid).length)
{
chkHeader.attr("checked", "checked");

}

}

});

});
</script>

Posted 15-Sep-13 0:06am

anurag19289

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rakesh Meel · Accepted Answer · 2013-09-13T21:54:00

Solution 2

visit Here...
And See demo Also

http://aspsnippets.com/Articles/Check-Uncheck-all-CheckBoxes-in-ASPNet-GridView-using-jQuery.aspx[^]

Posted 13-Sep-13 21:54pm

Rakesh Meel

Comments

anurag19289 15-Sep-13 5:49am

what does this mean ?
var grid = $(this).closest("table");

Sampath Lokuge 15-Sep-13 8:28am

.closest() - Begins with the current element and Travels up the DOM tree until it finds a match for the supplied selector.for more : http://api.jquery.com/closest/

anurag19289 15-Sep-13 6:07am

its working but i would like to know

var grid = $(this).closest("table");

anurag19289 15-Sep-13 6:09am

Thanks for the help :)