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

Question

我正在研究MVC 5，我有视图和部分视图。

＆＃13;

＆＃13;

@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>  
                            }  

＆＃13;

＆＃13;

＆＃13;

这是部分观点，

＆＃13;

＆＃13;

@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>  
}  

＆＃13;

＆＃13;

＆＃13;

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

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

注意：这里我使用相同的班级名称=＆＃34; chk_Product＆＃34;对于每个复选框。和＆＃39; @ item.AssociatedObject.ProductCategoryName＆＃39;是构造产品和电气产品（标题）其他所有复选框都是从局部视图绑定。

请帮帮我......

Answer 1

像这样重新排列视图页面;

查看：

@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);
});