Solved

JQuery Checkbox All did not check all

Posted on 2011-09-03
8
427 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
 
LVL 1

Author Comment

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

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now