locked
Using css class for checkbox:checked count in HTML table. RRS feed

  • Question

  • User-1549556126 posted

    I am trying to fetch the count of checked checkboxes from the HTML table column in a razor page using jQuery actually. I am not collecting ids of the checkboxes instead trying to use class to maintain the count. However, when I click on the checkbox the count initiates with : 2 x number of total table rows + checked checkboxes. It that a .css file issue? I am loading my checkbox column(appended) using a model in the mvc project. Here's my script: 

     $(document).ready(function () {
    
                
                $(".tblChkBx").change(function () {
                    $("#lblCountRecords").text($(".tblChkBx:checked").length);
                });
    
    }

    My HTML Table :

    <div class="row">
        <div class="col-md-12">
            <table id="data"
                   class="table table-striped table-hover">
                <thead>
                    <tr id="thead"
                        class="reviewsubhead">
                        
                        <th>guest name</th>
                        <th>
                            <div class="form-control" onclick="clearRadio()" font-size:8px;">
                                <a id="btnClear" class="arrow-link" onclick="clearRadio()" style="font-size: 0.77em;">
                                    clear: <label id="lblCountRecords">0</label>/<label id="lblTotalCount">0</label>
                                </a>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    @for (int guestNum = 0; guestNum < Model.GuestUserList.Count; guestNum++)
                    {
                        <tr>
                        
                            <td>@Model.GuestUserList[guestNum].Name</td>
                            <td align="center">
                                @Html.CheckBoxFor(c => c.GuestUserList[guestNum].ChkBox, new { @class = "tblChkBx" })
                                @Html.HiddenFor(c => c.GuestUserList[guestNum].Req_id)
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

    Any ideas what's going on?

    Friday, February 7, 2020 6:40 PM

All replies

  • User2053451246 posted
    $("#lblCountRecords").text($(".tblChkBx").filter(":checked").length);

    Friday, February 7, 2020 7:54 PM
  • User1535942433 posted

    Hi vyasnikul,

    Accroding to your description and codes,I create a little test and it works fine.

    Do you want to get the count of these checked checkboxes?I think,you may have other class to affect it.

    I suggest you could post full codes and it will help us to solve your problem more fast.

    More details,you could refer to below codes:

    View:

    @model WebApplication1.Model.Item
    @{
        ViewBag.Title = "Index";
    }
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".tblChkBx").change(function () {
                $("#lblCountRecords").text($(".tblChkBx:checked").length);
            });
        })
    </script>
    
    <h2>Index</h2>
        <div class="row">
            <div class="col-md-12">
                <table id="data"
                       class="table table-striped table-hover">
                    <thead>
                        <tr id="thead"
                            class="reviewsubhead">
    
                            <th>guest name</th>
                            <th>
                                <div class="form-control" font-size:8px;">
                                    <a id="btnClear" class="arrow-link" style="font-size: 0.77em;">
                                        clear: <label id="lblCountRecords">0</label>/<label id="lblTotalCount">0</label>
                                    </a>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        @for (int guestNum = 0; guestNum < Model.GuestUserList.Count; guestNum++)
                        {
                            <tr>
                                <td>@Model.GuestUserList[guestNum].Name</td>
                                <td align="center">
                                    @Html.CheckBoxFor(c => c.GuestUserList[guestNum].ChkBox, new { @class = "tblChkBx" })
                                    @Html.HiddenFor(c => c.GuestUserList[guestNum].Req_id)
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    

    Controller:

      public ActionResult Index()
            {
                List<CountCheck> services = new List<CountCheck>() {
                    new CountCheck{ Name="AA",ChkBox=false,Req_id=1},
                    new CountCheck{ Name="BB",ChkBox=false,Req_id=2},
                    new CountCheck{ Name="CC",ChkBox=false,Req_id=3},
                };
                Item item = new Item()
                {
                    GuestUserList = services,
                };
                return View(item);
            }

    Model:

     public class CountCheck
        {
            public string Name { get; set; }
            public bool ChkBox { get; set; }
            public int Req_id { get; set; }
        }
        public class Item
        {
            public List<CountCheck> GuestUserList { get; set; }
        }
    

    Result:

    Best regards,

    Yijing Sun

    Monday, February 10, 2020 6:22 AM