Check/Uncheck Parent/Child 复选框在 MVC 中使用 Jquery

Question

我对如何实现我的想法感到困惑。我希望有人可以阐明我将要做什么。我有类别、主要类别和子类别。主要类别有多个子类别。我认为我的数据拉取不是问题，显示数据是我的问题。我的数据是这样的：

Foo（小学）
- Foo1（子）
- Foo2（子）
法阿
- Faa1
- Faa2
- Faa3
费用
- 费用 1
- 费用2
- 费用 3
福

等等。

我的预期结果会像 this

到目前为止，我的代码是

<div class="col-xs-4">
    @{
        foreach (var item in Model)
        {
            var isPrimary = item.IsPrimary ? "" : "col-xs-offset-1";
            var isHeader = item.IsPrimary ? "bolder" : "";
            <div class="checkbox checkbox-info @isPrimary">
                <input type="checkbox" id="@item.Key">
                <label for="@item.Key">
                    <span style="font-weight: @isHeader">@item.Name</span>
                </label>
            </div>
        }
    }
</div>

在我的 Model 中有一个布尔值标记 IsPrimary 是否该项目是主要的。我在 <div class="col-xs-4"> 部分对如何循环每个具有相应子类别的主要部分感到困惑。

感谢您的帮助。

更新： 它现在使用以下代码相应地显示：

<form role="form">
    @for (var i = 0; i < Model.Count(); i++)
    {
        <div class="col-xs-4">
            <div class="checkbox checkbox-info">
                @Html.CheckBoxFor(m => m[i].IsSelected, new {id = Model[i].Key})
                <label for="@Model[i].Key"><b>@Model[i].Name</b></label>
            </div>
            @for (var g = 0; g < Model[i].SubsCategories.Count(); g++)
            {
                <div class="checkbox checkbox-info col-xs-offset-1">
                    @Html.CheckBoxFor(m => m[i].SubsCategories[g].IsSelected, new {id = Model[i].SubsCategories[g].Key})
                    <label for="@Model[i].SubsCategories[g].Key">@Model[i].SubsCategories[g].Name</label>
                </div>
            }
        </div>
    }
</form>

注意：您可能还会遇到复选框无法使用 awesome-bootstrap-checkbox 的问题，因为自动生成的隐藏输入字段复选框。只需将 css 中的 tilde ~ 更改即可。从 checked + label:after 到 checked ~ label:after

Answer 1

首先，您可能希望以某种易于使用的结构组织您的模型。例如：

public class Category
{
    public string Name {get; set;}
    public bool IsSelected {get; set;}
}

public class PrimaryCategory : Category
{        
    public IList<Category> SubCategories {get; set;}
}

那么在你看来：

@model IList<PrimaryCategory>

@for(var i = 0; i < Model.Count(); i++)
{
   @Html.LabelFor(m=>m[i].IsSelected, Model[i].Name) 
   @Html.CheckBoxFor(m=>m[i].IsSelected , new{@class="checkbox checkbox-info"}) 
   @for(var j = 0; j < Model[i].SubCategories.Count(); j++)
   {
      @Html.LabelFor(m=>m[i].SubCategories[j].IsSelected, Model[i].SubCategories[j].Name) 
      @Html.CheckBoxFor(m=>m[i].SubCategories[j].IsSelected, new{@class="checkbox checkbox-info col-xs-offset-1"}) 
   }
}

Check/Uncheck Parent/Child 复选框在 MVC 中使用 Jquery

Check/Uncheck Parent/Child Checkboxes using Jquery in MVC

asp.net-mvc

view

asp.net-mvc-5