Solved

JQuery Checkbox All did not check all

Posted on 2011-09-03
8
438 Views
Last Modified: 2012-05-12
notice that the following checkbox (cbHeader1) did not check all gridview checkboxes.


<script type='text/javascript' src="../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var chkBox = $("input[id$='cbHeader1']");
        chkBox.click(
                    function () {
                        $("#gvStudent INPUT[type='checkbox']")
                        .attr('checked', chkBox
                        .is(':checked'));
                    });
        // To deselect CheckAll when a GridView CheckBox        // is unchecked       
                    $("#gvStudent INPUT[type='checkbox']").click(
                    function (e) {
                        if (!$(this)[0].checked) {
                            chkBox.attr("checked", false);
                        }
                    });
    });

          
                 
</script>

aspx
----
<asp:GridView ID="gvStudent" runat="server" AutoGenerateColumns="false"
        GridLines="None" Width="300px" CssClass="datatableNormal" 
        AlternatingRowStyle-CssClass="datatableHighlight" BorderColor="#cccccc" BorderWidth="1">
            <Columns>
                
                
            <asp:BoundField HeaderText="Student Name" DataField="Name"  HeaderStyle-Width="290px" HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="datatableitem" HeaderStyle-CssClass="gridheaderstudentatt" /> 
            <asp:TemplateField HeaderStyle-Width="20%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="datatableitem" HeaderText="Module">
                <ItemTemplate>
                     <asp:CheckBox ID="cbAssign" runat="server" />
                </ItemTemplate>
              <HeaderTemplate>
                                            <span style="float:right">Mark<asp:CheckBox ID="cbHeader1" runat="server" /></span>
                                         </HeaderTemplate> 
            </asp:TemplateField>
             <asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="gridheaderstudentatt" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="datatableitem">
                                            <ItemTemplate>
                                                <div style="margin-top:6px; height:30px">
                                                    <asp:Label ID="lblSIDField" Visible="false" Text='<%# Eval("ID") %>' runat="server" />  
                                                </div>
                                            </ItemTemplate>
            
                                        </asp:TemplateField>
            </Columns>
        </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlintake" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>

Open in new window

0
Comment
Question by:doramail05
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36478147
let we see more of your page
a link for example
0
 
LVL 1

Author Comment

by:doramail05
ID: 36478634
the site hasnt live yet,
posting the remaining source code
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/mpTrainers.master" AutoEventWireup="true" CodeFile="TrainerInputStudentAttendance.aspx.cs" Inherits="Trainers_TrainerInputStudentAttendance" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
 <script type='text/javascript' src="../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var chkBox = $("input[id$='cbHeader1']");
        chkBox.click(
                    function () {
                        $("#gvStudent INPUT[type='checkbox']")
                        .attr('checked', chkBox
                        .is(':checked'));
                    });
        // To deselect CheckAll when a GridView CheckBox        // is unchecked       
                    $("#gvStudent INPUT[type='checkbox']").click(
                    function (e) {
                        if (!$(this)[0].checked) {
                            chkBox.attr("checked", false);
                        }
                    });
    });

          
                 
</script>
    <style type="text/css">
        .style5
        {
            width: 425px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div id="pagetitle">
           <asp:Label ID="lblpagetitle" Text="Input Attendance" runat="server" />
          
        </div>
<div style="width:800px">
    <asp:Label ID="lbldatenow" runat="server" />
    <asp:Label ID="lblPageMsg" runat="server"  Font-Names="Arial" Font-Size="12" />
    <br />
    &nbsp;
   
    <table width="400"> 
        <tr>
            <td class="normalfont">
    <asp:Label ID="lblmonth" runat="server" Text="Month" CssClass="normalfont" /></td>
            <td class="normalfont">:</td>
            <td class="normalfont"> <asp:DropDownList ID="ddlmonth" runat="server" AutoPostBack="true" onselectedindexchanged="ddlmonth_SelectedIndexChanged" />
            </td>
            <td class="normalfont">&nbsp;</td>
        </tr>
        <tr>
            <td class="normalfont">
               Class Type
            </td>
            <td class="normalfont">:</td>
            <td class="normalfont"> <asp:DropDownList ID="ddlclasstype" runat="server" DataValueField="ID" DataTextField="ClassType">
                   
                </asp:DropDownList></td>
            <td class="normalfont"></td>
        </tr>
        <tr>
            <td class="normalfont">Module</td>
            <td class="normalfont">:</td>
            <td class="normalfont">
            <asp:DropDownList ID="ddlmodule" runat="server" DataValueField="ID" DataTextField="ModuleName">
            
            </asp:DropDownList>
            </td>
            <td class="normalfont"></td>
        </tr>
    
        <tr>
            <td class="normalfont">Lesson</td>
            <td class="normalfont">:</td>
            <td><asp:DropDownList ID="ddllesson" runat="server" DataValueField="ID" DataTextField="LessonName"></asp:DropDownList></td>
            <td>&nbsp;</td>
        </tr>
    
        <tr>
            <td class="normalfont">Trainee</td>
            <td class="normalfont">:</td>
            <td><asp:DropDownList ID="ddltrainee" runat="server" /></td>
            <td>&nbsp;</td>
        </tr>
    
        <tr>
            <td class="normalfont">&nbsp;</td>
            <td class="normalfont">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    
        <tr>
            <td class="normalfont">Start Time</td>
            <td class="normalfont">:</td>
            <td><asp:TextBox id="txtSTHour" runat="server" Width="20"></asp:TextBox> &nbsp; : &nbsp; <asp:TextBox ID="txtSTMinute" runat="server" Width="20" /></td>
            <td width="140"><asp:Label ID="lblstarttimerequired" runat="server" ForeColor="Red" Text="Start Time Required" /></td>
        </tr>
    
        <tr>
            <td class="normalfont">End Time</td>
            <td class="normalfont">:</td>
            <td><asp:TextBox ID="txtETHour" runat="server" Width="20" /> &nbsp; : &nbsp; <asp:TextBox ID="txtETMinute" runat="server" Width="20" /></td>
            <td><asp:Label ID="lblEndTimeRequired" runat="server" ForeColor="Red" Text="End Time Required" /></td>
        </tr>
    
    </table>
   
   <div style="width:1000px">
   <div style="float:left">
    <table width="300px">
    <tr>
    
        <td valign="top">
         <asp:UpdatePanel ID="udpStudent" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
        <table>
            <tr valign="top">
                <td width="105px" class="normalfont">Intake</td>
                <td width="5px">:</td>
                <td width="100px"><asp:DropDownList ID="ddlintake" runat="server" AutoPostBack="true" DataValueField="ID" DataTextField="IntakeName" OnSelectedIndexChanged="ddlintake_SelectedIndexChanged" /></td>
            </tr>
        </table>
        </td>
        <td></td>
    </tr>
    <tr>
        <td valign="top" width="300px">
         
              <asp:GridView ID="gvStudent" runat="server" AutoGenerateColumns="false"
        GridLines="None" Width="300px" CssClass="datatableNormal" 
        AlternatingRowStyle-CssClass="datatableHighlight" BorderColor="#cccccc" BorderWidth="1">
            <Columns>
                
                
            <asp:BoundField HeaderText="Student Name" DataField="Name"  HeaderStyle-Width="290px" HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="datatableitem" HeaderStyle-CssClass="gridheaderstudentatt" /> 
            <asp:TemplateField HeaderStyle-Width="20%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="datatableitem" HeaderText="Module">
                <ItemTemplate>
                     <asp:CheckBox ID="cbAssign" runat="server" />
                </ItemTemplate>
              <HeaderTemplate>
                                            <span style="float:right">Mark<asp:CheckBox ID="cbHeader1" runat="server" /></span>
                                         </HeaderTemplate> 
            </asp:TemplateField>
             <asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="gridheaderstudentatt" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="datatableitem">
                                            <ItemTemplate>
                                                <div style="margin-top:6px; height:30px">
                                                    <asp:Label ID="lblSIDField" Visible="false" Text='<%# Eval("ID") %>' runat="server" />  
                                                </div>
                                            </ItemTemplate>
            
                                        </asp:TemplateField>
            </Columns>
        </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlintake" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
          
        </td>
        
        <td valign="top" >
        <br />
       
      </td>
    </tr>
    </table>
    </div>
    <div style="float:right; padding-right:40px; padding-top:8px;">

    <table>
    <tr>    
        <td>
        <br />
          <asp:GridView ID="gvTrainerInputStudentAttendance" runat="server" AutoGenerateColumns="false"
        GridLines="None" Width="600px" CssClass="datatableNormal" 
        AlternatingRowStyle-CssClass="datatableHighlight" BorderColor="#cccccc" BorderWidth="1">
    <Columns>
     <asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="datatableitem" HeaderText="Date">
                <ItemTemplate>
                <div style="margin-top:6px; height:30px">
                    <asp:Label id="lbldate" runat="server" />
                    </div>
                </ItemTemplate>
            
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Width="20%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="datatableitem" HeaderText="Start Time">
                <ItemTemplate>
                <div style="margin-top:6px; height:30px">
                    <asp:TextBox ID="txtStartTimeHour" runat="server" Width="50px" /> : <asp:TextBox ID="txtStartTimeMinute" runat="server" Width="50px" />
                    <asp:TextBox ID="txtStartTimeRequired" runat="server" ForeColor="Red" Text="Start Time & Minute Required" Visible="false" />
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txtStartTimeHour" WatermarkText="hh"
                     WatermarkCssClass="textboxwatermark">
                    </asp:TextBoxWatermarkExtender>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="txtStartTimeMinute" WatermarkText="mm" WatermarkCssClass="textboxwatermark">
                    </asp:TextBoxWatermarkExtender>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtStartTimeHour"
                       ErrorMessage="Enter only Numbers" ForeColor="Red" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>
                       <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtStartTimeMinute"
                       ErrorMessage="Enter only Numbers" ForeColor="Red" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>
                </div>
                </ItemTemplate>
            
            </asp:TemplateField>
               <asp:TemplateField HeaderStyle-Width="20%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="datatableitem" HeaderText="End Time">
                <ItemTemplate>
                 <div style="margin-top:6px; height:30px">
                    <asp:TextBox ID="txtEndTimeHour" runat="server" Width="50px" /> :  <asp:TextBox ID="txtEndTimeMinute" runat="server" Width="50px" />
                    <asp:TextBox ID="txtEndTimeRequired" runat="server" ForeColor="Red" Text="End Time & Minute Required" Visible="false" />
                     <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" runat="server" TargetControlID="txtEndTimeHour" WatermarkText="hh"
                     WatermarkCssClass="textboxwatermark">
                    </asp:TextBoxWatermarkExtender>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" runat="server" TargetControlID="txtEndTimeMinute" WatermarkText="mm" WatermarkCssClass="textboxwatermark">
                    </asp:TextBoxWatermarkExtender>
                   <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="txtEndTimeHour"
                       ErrorMessage="Enter only Numbers" ForeColor="Red" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="txtEndTimeMinute"
                       ErrorMessage="Enter only Numbers" ForeColor="Red" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>

                       </div>
                       </ItemTemplate>
                    </asp:TemplateField>
               <asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="gridheaderstudentatt" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="datatableitem" HeaderText="Absense">
                <ItemTemplate>
                 <div style="padding-right:30px;margin-top:6px;">
                     <asp:CheckBox ID="cbAbsense" runat="server" />
                     </div>
                </ItemTemplate>
            
            </asp:TemplateField>
            
             <asp:TemplateField HeaderStyle-Width="30%" HeaderText="Reason" HeaderStyle-CssClass="gridheaderstudentatt" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="datatableitem">
                                            <ItemTemplate>
                                                <div style="padding-left:20px;margin-top:6px; height:30px">
                                                    <asp:TextBox ID="txtAbsenseReason"  runat="server" />  
                                                </div>
                                            </ItemTemplate>
            
                                        </asp:TemplateField>
       
    </Columns>
    </asp:GridView>
     <asp:LinkButton ID="lbSubmit" CssClass="shortbutton" runat="server" OnClick="btnSave_Click">Submit</asp:LinkButton>
        </td>
        <td>
        
        </td>
    </tr>
    </table>
    </div>
    </div>

    
    
    </div>
</asp:Content>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36479035
try this :
$(document).ready(function () {
        $("#<%= cbHeader1.ClientID %>").click(function () { $("#<%= gvStudent.ClientID %>").find(":checkbox").attr('checked', $(this).is(':checked')); });
        $("#<%= gvStudent.ClientID %>").find(":checkbox").click(function (e) { if(!$(this)[0].checked) { $("#<%= cbHeader1.ClientID %>").attr("checked", false); } });
});

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:doramail05
ID: 36479491
having prob that
couldnt detect cbHeader1.ClientID

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36480401
OK use add a class :
<asp:CheckBox ID="cbHeader1" runat="server" class="cbHeader" />

So use :
$(document).ready(function () {
        $(".cbHeader").click(function () { $("#<%= gvStudent.ClientID %>").find(":checkbox").attr('checked', $(this).is(':checked')); });
        $("#<%= gvStudent.ClientID %>").find(":checkbox").click(function (e) { if(!$(this)[0].checked) { $(".cbHeader").attr("checked", false); } });
});

Open in new window

0
 
LVL 1

Author Comment

by:doramail05
ID: 36481891
still couldnt with the following :
<script type='text/javascript' src="../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(".cbHeader").click(function () { $("#<%= gvStudent.ClientID %>").find(":checkbox").attr('checked', $(this).is(':checked')); });
        $("#<%= gvStudent.ClientID %>").find(":checkbox").click(function (e) { if (!$(this)[0].checked) { $(".cbHeader").attr("checked", false); } });
    });
          
                 
</script>

Open in new window

0
 
LVL 1

Accepted Solution

by:
doramail05 earned 0 total points
ID: 36481899
this assist,


<script type="text/javascript"> 
        function selectAll(status) { 
            var allCheckboxes = document.getElementById('<%=GridView1.ClientID %>').getElementsByTagName("input"); 
            for (var i = 0; i < allCheckboxes.length; i++) { 
                if (allCheckboxes[i].type == 'checkbox') 
                    allCheckboxes[i].checked = status; 
            } 
            countChecked(allCheckboxes); 
        } 
        function countChecked() { 
            var total = 0; 
            var allCheckboxes = document.getElementById('<%=GridView1.ClientID %>').getElementsByTagName("input"); 
            for (var i = 0; i < allCheckboxes.length; i++) { 
                if (allCheckboxes[i].type == 'checkbox' && allCheckboxes[i].checked && allCheckboxes[i].id.indexOf("chkSelectAll") == -1) 
                    total++; 
            } 
            document.getElementById('count').innerHTML = total; 
        } 
    </script> 

<asp:CheckBox ID="chkSelectAll" runat="server" onclick="selectAll(this.checked)">

Open in new window

0
 
LVL 1

Author Closing Comment

by:doramail05
ID: 36508969
solved
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question