Solved

JQuery Checkbox All did not check all

Posted on 2011-09-03
8
444 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
  • 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!

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

734 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