父子复选框列表从每行检查/取消选中。 [英] Parent child checkbox list check/uncheck from each row.

问题描述

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

I am working on MVC 5, there I have view and partial 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>  
                            }  

这是局部视图，

And this is partial 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循环从主视图调用局部视图，外观和感觉显示如下图像，



[ ^ ]



如何查看/取消选中复选框列表，如上图所示？



注意：这里我为每个复选框使用相同的类名class =chk_Product。 '@ item.AssociatedObject.ProductCategoryName'是Construcation Products and Electrical Products（标题）其他所有复选框都是从部分视图绑定的。



请帮帮我...

What I have tried:

With respect to calling partial view from main view using foreach loop, look and feel show like below image,

[^]

How can I Check/Uncheck checkbox list as above image showing?

Note: Here I am using same class name class="chk_Product" for every checkboxes. And '@item.AssociatedObject.ProductCategoryName' is Construcation Products and Electrical Products (heading) other all check boxes are binding from partial view.

Please help me...

推荐答案

首先制作一致的标记：



查看：

Start by producing consistent markup:

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

部分：

Partial:

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

现在，要从父复选框获取其子复选框，您只需要找到最接近的< li> ，找到 .offered-sub-list ，然后找到该列表中的所有复选框：

Now, to get from a parent checkbox to its child checkboxes, you just need to find the closest <li>, find the .offered-sub-list, and then find all checkboxes within that list:

（ 。chk_Product ）。on（ 点击， function （）{

(".chk_Product").on("click", function(){

（ this ）。nearest（ li）。find（ > ; .offered-sub-list .chk_Product）。prop（ checked， 此 .checked）;
}）;

(this).closest("li").find("> .offered-sub-list .chk_Product").prop("checked", this.checked); });

演示 [ ^ ]

这篇关于父子复选框列表从每行检查/取消选中。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！