Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery Checkbox All did not check all

Posted on 2011-09-03
8
1 solution
Medium Priority
?
461 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Take Survey Now!
 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

See our Offerings
Question has a verified solution.

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

Simplifying jQuery Ajax calls in JavaScript
Article by: Luis
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js
Article by: Serhiy
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Introduction to jQuery (Part 1)
Video by: Jason
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)
Introduction to jQuery (Part 2)
Video by: Jason
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…
Advertise Here

704 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

Advertise Here