Click here to Skip to main content
15,303,522 members
Please Sign up or sign in to vote.
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
Updated 14-Sep-13 9:07am
v5

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.
   
   
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 :)
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>
   

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900