Check/Uncheck Parent/Child Checkboxes using Jquery

问题:

I got confused on how to achieved what I have in my mind. I hope someone might give light on what I'm going to do. I have categories, primary and sub categories. Primary categories have multiple sub categories. I think my data pulling is not a problem, displaying the data is my problem. My data is like:

1. Foo (Primary)

   • Foo1 (Sub)
   • Foo2 (Sub)

2. Faa

   • Faa1
   • Faa2
   • Faa3

3. Fee

   • Fee1
   • Fee2
   • Fee3

4. Fuu

and so on.

My expected result will be like this

So far, my code is

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

In my Model there is a tagging of booleanIsPrimary if the item is primary or not. I got confused in <div class="col-xs-4"> part on how to loop for every primary with corresponding sub category.

Thanks for helping.

UPDATE: It's now displaying accordingly using code below:

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

Note: By any chance you'll also encounter the problem of the checkbox is not working using the awesome-bootstrap-checkbox, because of the auto generated hidden input field of CheckBoxFor. Just change the tilde ~ in css. From checked + label:after to checked ~ label:after

回答1:

First of all you may want to organize your Model in some structure that will be easy to use. For example:

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

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

Then in your view:

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