父子复选框列表从每行检查/取消选中。 [英] 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屋!