如何根据集合动态构建复选框选择控件

背景：根据列表或集合，构建复选框控件，从中选取若干选项。比如，构建城市选择控件，城市按照字母分组进行展示。再比如，构建学生选择控件，学生按照城市进行分组展示。常作为分部视图使用。

效果图：

如何根据集合动态构建复选框选择控件

如图，城市以红色字体显示，李雷来自北京，同时Lily和Lucy来自纽约。

HTML代码如下：

 1         <table><tr><td><input type="checkbox" id="checkedAll" onclick="whenAllChecked($(this))" /><label>全选</label></td></tr></table>
 2         <table id="tableStu">
 3            @{
 4                var tmp = ViewBag.CityList as List<STU>;
 5                 foreach (var item in tmp.GroupBy(c=>c.City).OrderBy(b=>b.Key))
 6                 {
 7                     <tr><td><input type="checkbox" class="city" onclick="whenCityChecked($(this))" id=@item.Key /><label for=@item.Key style="color:red">@item.Key</label></td></tr>
 8                     <tr>
 9                         @foreach(STU s in item.OrderBy(a=>a.Age))
10                         {
11                             <td><input type="checkbox" id=@s.ID class="stuCheck" onclick="whenStuChecked($(this))"/><label for=@s.ID>@s.Name</label></td>
12                         }
13                     </tr>
14                 }
15             }
16         </table>

View Code