Solved

JQuery Checkbox All did not check all

Posted on 2011-09-03
8
434 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
javascript: add id amounts 5 47
Google Maps API and PHP 25 32
Jquery Validation Messages Not Showing Up 3 14
Add shadow behind div 5 14
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 …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

809 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