计算视图中未选中的复选框，asp.net mvc

Question

我可以显示选中的复选框，但我想在局部视图 _GetDetailsProfileTab 中显示未选中的复选框。

我有这个用于选中的复选框：

 <table width="550">
                            <tr>
                                <td><h6>NAME</h6></td>

                                <td><h6>COUNTRY</h6></td>

                                <td><h6>DIFFICULT LEVEL</h6></td>

                            </tr>



                            @{
                                foreach (var climb in Model.Climbs)
                                {


                                    <tr>
                                        <td>@climb.Name</td>
                                        <td>@climb.country.country_name </td>
                                        <td>@climb.difficult.DifficultName</td>
                                    </tr>



                                }


                            }
                           <tr><th><br /></th></tr>
                            <tr>
                                <td>@Model.Climbs.Count</td> of 
                            </tr>
                        </table>

但是如何显示未选中的复选框？

例如，我不能用这个：

$(document).ready(function () {

            var numSelected = $("input.mycheckBox:checked").length;
                alert(numSelected)




            });

在局部视图中：_GetDetailsProfileTab，因为复选框是在其他局部视图中定义的。在 _GetDetailsProfileTab 的详细视图中，用户只能看到用户通过他/她的个人资料选择的复选框。

这是视图，用户可以在其中选择复选框（_GetClimbTab）：

@model ContosoUniversity.Models.UserProfile
@using ContosoUniversity.Source
@{
    ViewBag.Title = "GetClimbs";
}


@using (Html.BeginForm("GetClimbs", "Account", FormMethod.Post, new { id = "form_Id", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal" id="chexkboxes">


        @Html.HiddenFor(model => model.Id)


        <table border="0">
            <tr>

        @{
    int cnt = 0;
    List<ContosoUniversity.ViewModels.AssignedClimb> climbs = ViewBag.Climbs;


    foreach (var climb in climbs)
    {  
        if (cnt++ % 1 == 0)
        {
                    @:</tr><tr>
                }


                @:<td>

            <input type="checkbox"
                   id="toggleAll"
                   name="selectedClimbs"
                   class="mycheckBox"
                   value="@climb.ClimbID"
                   @(Html.Raw(climb.Assigned ? "checked=\"checked\" " : "  ")) />

                           @climb.Title @: -  @climb.NameCountry - @climb.DifficultName




                 @:</td>
            }
            @:</tr>
        }
            </table>

        <input type="checkbox" name="Test" onclick="SetAllCheckBoxes(this)" /><span>Check All</span>




    </div>
    <br />
    <div class="pull-left">
        <div class="col-md-offset-0">
            <input type="submit" value="Save" id="toastr-success" class="btn btn-default pull-left" />

        </div>
    </div>
}

<br /><br />
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

因为最终结果必须是：你从 y 中选择了 x

所以我试试这个：

<table width="550">
                            <tr>
                                <td><h6>NAME</h6></td>

                                <td><h6>COUNTRY</h6></td>

                                <td><h6>DIFFICULT LEVEL</h6></td>

                            </tr>



                            @{

                              List<ContosoUniversity.Models.Climb> climbs = new List<ContosoUniversity.Models.Climb>(); 
                                foreach (var climb in Model.Climbs)
                                {

                                    <tr>
                                        <td>@climb.Name</td>
                                        <td>@climb.country.country_name </td>
                                        <td>@climb.difficult.DifficultName</td>
                                    </tr>



                                }


                            }
                           <tr><th><br /></th></tr>
                            <tr>
                                <td>@Model.Climbs.Count</td>   
                                <td>@climbs.Capacity.ToString()  </td>   




</tr>
                        </table>

但是<td>@climbs.Capacity.ToString() </td> 每次都是 0。那么如何获得爬升总数（选中和未选中）？

谢谢

这工作（编辑）视图：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Personal information</a></li>
        <li><a href="#tabs-2">Profile Photo</a></li>
        <li><a href="#tabs-3">Other Photos</a></li>
        <li><a href="#tabs-4">Climb</a></li>
        <li><a href="#tabs-5">route</a></li>
    </ul>
    <div id="tabs-1">
        @Html.Partial("_GetUserProfile", Model)
    </div>
    <div id="tabs-2">
        @Html.Partial("_GetProfilePicture", Model)
    </div>
    <div id="tabs-3">
        @Html.Partial("_GetOtherImages", Model)
    </div>
    <div id="tabs-4">
        @Html.Partial("_GetClimbTab", Model)
    </div>

    <div id="tabs-5">
        @Html.Partial("_GetRouteTab", Model)
    </div>

</div>

@section Scripts
{
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            var numSelected = $("input.mycheckBox:checked").length;
            var numNotSelected = $("input.mycheckBox:not(:checked").length;
            var total = numSelected + numNotSelected;
            alert("not checked:" + numNotSelected);
            alert("You checked:" + numSelected);
            alert("total of checkboxes are: " + total);




            });

因为在 GetClimbTab 中定义了复选框。

但这不起作用（详细）视图：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Profile</a></li>
        <li><a href="#tabs-2">Photos</a></li>

    </ul>
    <div id="tabs-1">

        @Html.Partial("_GetDetailsProfileTab", Model)
    </div>
    <div id="tabs-2">
        @Html.Partial("_GetDetailsPhotoTab", Model)
    </div>


</div>

@*<h2>Details</h2>*@

@section Scripts{

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />   
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Progressbar.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Progressbar.js")" type="text/javascript"></script>






    <script>

        $(document).ready(function () {


            //var Id = $("#Id").val();
            $.get('@Url.Action("Edit", "Account")', function (data) {
                // data is your partial HTML, $data is your jQuery object containing partial
                //var $data = $(data);
                $("#_GetClimbTab").html(data);
                var numSelected = $("input.mycheckBox:checked").length;
                alert(numSelected);
            });

alert(numSelected); is everytime 0

Answer 1

您可以使用:not 来获取未选中的复选框，请参见下面的代码

$(document).ready(function () {
   var numSelected = $("input.mycheckBox:not(:checked)").length;
   alert(numSelected)
});

Answer 2

您应该将计数复选框逻辑放在您从服务器接收到部分视图之后。例如：

$.get("http://Partial/GetOne", function(data){
    // data is your partial HTML, $data is your jQuery object containing partial
    var $data = $(data);

    var numSelected = $data.find("input.mycheckBox:not(:checked)").length;
    alert(numSelected);
});