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

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?

Answer 1

User2053451246 posted

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

Answer 2

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