jquery - 父子复选框列表选中/取消选中MVC 5

Question

我正在开发 MVC 5，在那里我有 View 和部分 View 。

@foreach (var item in Model)  
                            {  
                                <div class="js-list list-wrapper list-padding u-fancy-scrollbar">  
                                    <ul class="offered-list">  
  
                                        @if (item.AssociatedObject.idParentCategoryProduct == 0)  
                                        {  
                                            <li>  
                                                <div class="checkbox ">  
                                                    <label class="hd-txt"><input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">  
                                                        <label style="padding:0">@item.AssociatedObject.ProductCategoryNamelabel>  
                                                    label>  
                                                div>  
                                            li>  
                                        }  
                                        <li>  
                                            @Html.Partial("_productOffered", item)  
                                        li>  
                                    ul>  
                                div>  
                            }  

这是部分 View ，

@model Rebox.BIL.DataModel.ProductsMenuListDM  
  
@foreach (var item in Model.ProductsList)  
{  
    <ul class="offered-sub-list">  
        @if (item != null)  
        {  
            <li>  
                <div class="checkbox ">  
                    <label>  
                        <input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">  
                        <label style="padding:0">@item.AssociatedObject.ProductCategoryNamelabel>  
                    label>  
                    @if (item.ProductsList.Count > 0)  
                    {  
                        @Html.Partial("_productOffered", item)  
                    }  
                div>  
            li>  
        }  
    ul>  
}  

关于使用 foreach 循环从主视图调用部分 View 。

如何选中/取消选中复选框列表？

注意:这里我对每个复选框使用相同的类名 class="chk_Product"。 '@item.AssociatedObject.ProductCategoryName' 是建筑产品和电气产品(标题)，其他所有复选框都从部分 View 中绑定(bind)。

请帮助我...

Answer 1

像这样重新排列 View 页面；

查看:

@foreach (var item in Model)
{
    <div class="js-list list-wrapper list-padding u-fancy-scrollbar">
        <ul class="offered-list">
            @if (item.AssociatedObject.idParentCategoryProduct == 0)
            {
                <li>
                    <div class="checkbox">
                        <label class="hd-txt"><input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">
                            <label style="padding:0">@item.AssociatedObject.ProductCategoryName</label>
                        </label>
                    </div>
                    @Html.Partial("_productOffered", item)
                </li>  
            }
            else
            {
                <li>
                    @Html.Partial("_productOffered", item)  
                </li>
            }
        </ul>
    </div>
}

部分:

@model Rebox.BIL.DataModel.ProductsMenuListDM
  
@foreach (var item in Model.ProductsList)
{
    if (item != null)
    {
        <ul class="offered-sub-list">
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">
                        <label style="padding:0">@item.AssociatedObject.ProductCategoryName</label>
                    </label>
                </div>
                @if (item.ProductsList.Count > 0)
                {
                    @Html.Partial("_productOffered", item)  
                }  
            </li>
        </ul>
    }
}

下一步是从父复选框获取子复选框的 jQuery 部分，

$(".chk_Product").on("click", function(){
    $(this).closest("li").find("> .offered-sub-list .chk_Product").prop("checked", this.checked);
});