locked
How to get row count when Checkbox if selected in Javascript RRS feed

  • Question

  • User-582711651 posted

    Hi, 

    Anyone, please help me, how to get row count in Javascript, when the checkbox is checked, the count value must show in a label lbl_grcounter

    ref., my code

    <asp:GridView ID="Grd_Groups" runat="server" 
                                AutoGenerateColumns="False" CellPadding="4" CssClass="smalltext2" 
                                ForeColor="#333333">
                                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                                <Columns>
                                    <asp:TemplateField>
                                     <HeaderTemplate>
                                      <asp:CheckBox ID="checkAll" runat="server" onclick="SelAll_Chks(this)" />
                                      </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="cbx_cgl" runat="server" CssClass="normalText2" onclick ="GetCount(this)"/>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Sr#">
                                        <ItemTemplate>
                                            <%#Container.DataItemIndex + 1 %>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="GroupID" HeaderText="GroupID" />
                                    <asp:BoundField DataField="ExistVillage" HeaderText="Exist.Village" />
                                    <asp:BoundField DataField="GroupName" HeaderText="Group Name" />
                                    <asp:BoundField DataField="MappdVillName" HeaderText="Mapped with" />
                                    <asp:BoundField DataField="IsMapped" HeaderText="-" />
                                </Columns>
                                <EditRowStyle BackColor="#999999" />
                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                            </asp:GridView>
    
    Count will be stored into label
    <asp:Label ID="lbl_grcounter" runat="server" Font-Bold="True" ForeColor="#000099"></asp:Label>
    I tried this, but not getting the result 
    
     function GetCount(obj) {
             var grid = obj.parentNode.parentNode.parentNode;
             var checkBoxes = grid.getElementsByTagName("INPUT");
             var rx = 0
             for (var i = 0; i < checkBoxes.length; i++) {
                if (checkBoxes[i].checked) {
                   rx = rx + 1;  
                   }
    
                  }
                    alert(rx);     
                  }
    

    Thanks in advance.

    Monday, August 24, 2020 8:57 PM

Answers

  • User-939850651 posted

    Hi ayyappan.CNN,

    These checkboxes are rendered as page elements in the table. Have you tried using jQuery to get and iterate them?

    Something like this, and for testing, I edit some code:

    <head runat="server">
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <title></title>
        <script>
            function SelAll_Chks(obj) {
                var checkBoxList = $('tr td input[type="checkbox"]');
                $(checkBoxList).each(function () {
                    $(this).prop('checked',true);
                });
    GetCount(); } function GetCount(obj) { var rx = 0; var checkBoxList = $('tr td input[type="checkbox"]'); $(checkBoxList).each(function () { if ($(this).prop('checked') == true) rx += 1; }); console.log(rx); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="Grd_Groups" runat="server" AutoGenerateColumns="False" CellPadding="4" CssClass="smalltext2" ForeColor="#333333"> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="checkAll" runat="server" onclick="SelAll_Chks(this)" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="cbx_cgl" runat="server" CssClass="normalText2" onclick="GetCount(this)" /> </ItemTemplate> </asp:TemplateField> <%-- <asp:TemplateField HeaderText="Sr#"> <ItemTemplate> <%#Container.DataItemIndex + 1 %> </ItemTemplate> </asp:TemplateField>--%> <asp:BoundField DataField="col_name1" HeaderText="column1" /> <asp:BoundField DataField="col_name2" HeaderText="column2" /> <asp:BoundField DataField="col_name3" HeaderText="column3" /> <%-- <asp:BoundField DataField="MappdVillName" HeaderText="Mapped with" /> <asp:BoundField DataField="IsMapped" HeaderText="-" />--%> </Columns> <EditRowStyle BackColor="#999999" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> </asp:GridView> <br /> <asp:Label ID="lbl_grcounter" runat="server" Font-Bold="True" ForeColor="#000099"></asp:Label> </div> </form> </body>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2020 2:50 AM
  • User-474980206 posted

    as your using jquery, just use selector:

    function GetCount(obj) {
         // count checked checkboxes only in body, not header 
         var count = $(obj).closest('table').find('tbody tr :checkbox:checked').length;
         //display 
         $('#lbl_grcounter').text(count);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2020 5:12 PM

All replies

  • User-939850651 posted

    Hi ayyappan.CNN,

    These checkboxes are rendered as page elements in the table. Have you tried using jQuery to get and iterate them?

    Something like this, and for testing, I edit some code:

    <head runat="server">
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <title></title>
        <script>
            function SelAll_Chks(obj) {
                var checkBoxList = $('tr td input[type="checkbox"]');
                $(checkBoxList).each(function () {
                    $(this).prop('checked',true);
                });
    GetCount(); } function GetCount(obj) { var rx = 0; var checkBoxList = $('tr td input[type="checkbox"]'); $(checkBoxList).each(function () { if ($(this).prop('checked') == true) rx += 1; }); console.log(rx); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="Grd_Groups" runat="server" AutoGenerateColumns="False" CellPadding="4" CssClass="smalltext2" ForeColor="#333333"> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="checkAll" runat="server" onclick="SelAll_Chks(this)" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="cbx_cgl" runat="server" CssClass="normalText2" onclick="GetCount(this)" /> </ItemTemplate> </asp:TemplateField> <%-- <asp:TemplateField HeaderText="Sr#"> <ItemTemplate> <%#Container.DataItemIndex + 1 %> </ItemTemplate> </asp:TemplateField>--%> <asp:BoundField DataField="col_name1" HeaderText="column1" /> <asp:BoundField DataField="col_name2" HeaderText="column2" /> <asp:BoundField DataField="col_name3" HeaderText="column3" /> <%-- <asp:BoundField DataField="MappdVillName" HeaderText="Mapped with" /> <asp:BoundField DataField="IsMapped" HeaderText="-" />--%> </Columns> <EditRowStyle BackColor="#999999" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> </asp:GridView> <br /> <asp:Label ID="lbl_grcounter" runat="server" Font-Bold="True" ForeColor="#000099"></asp:Label> </div> </form> </body>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2020 2:50 AM
  • User-582711651 posted

    Hi, 

    Thanks, I got the result but, here I get count+1, tried put -1 then only I get an exact result, 

            <script src="JScript/jquery-3.3.1.min.js" type="text/jscript" ></script>
            <script type="text/javascript">
                function GetCount(obj) {
                var rx = 0;
                var checkBoxList = $('tr td input[type="checkbox"]');
                $(checkBoxList).each(function () {
                    if ($(this).prop('checked') == true)
                        rx += 1;
                });
                alert(rx);  // added +1, worng value
                $('#lbl_grcounter').text(rx-1); // when put -1 to get exact result. 
                }
                 </script>

    Tuesday, August 25, 2020 4:26 AM
  • User-939850651 posted

    Hi ayyappan.CNN,

    I don't quite understand what you mean, this is the number of checkboxes counted in the table body, not including the table head (Select All CheckBox).

    As I demonstrated, there are ten records in my grid, and when I select all, it only counts as 10.

    You need this count -1? If this is the case, you could start counting from -1.

    If I misunderstand what you mean, could you describe your requirement more accurately and in detail?

    Best regards,

    Xudong Peng

    Tuesday, August 25, 2020 6:49 AM
  • User-474980206 posted

    as your using jquery, just use selector:

    function GetCount(obj) {
         // count checked checkboxes only in body, not header 
         var count = $(obj).closest('table').find('tbody tr :checkbox:checked').length;
         //display 
         $('#lbl_grcounter').text(count);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 25, 2020 5:12 PM