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

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

效果图：

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

HTML代码如下：

        <table><tr><td><input type="checkbox" id="checkedAll" onclick="whenAllChecked($(this))" /><label>全选</label></td></tr></table>
        <table id="tableStu">
           @{
               var tmp = ViewBag.CityList as List<STU>;
                foreach (var item in tmp.GroupBy(c=>c.City).OrderBy(b=>b.Key))
                {
                    <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>
                    <tr>
                        @foreach(STU s in item.OrderBy(a=>a.Age))
                        {
                            <td><input type="checkbox" id=@s.ID class="stuCheck" onclick="whenStuChecked($(this))"/><label for=@s.ID>@s.Name</label></td>
                        }
                    </tr>
                }
            }
        </table>

JS代码如下：

<script>
    function whenStuChecked($obj) {
        var cityChecked = true;
        var AllChecked = true;
        $obj.parent().parent().find('input').each(function () {
            if ($(this).attr('Checked') != "checked") {
                $obj.parent().parent().prev('tr').find('input').removeAttr('checked');
                cityChecked = false;
                AllChecked = false;
            }
        });
        if (AllChecked == false) {
            $("#checkedAll").removeAttr("checked");
        }
        if (cityChecked) {
            $obj.parent().parent().prev('tr').find('input').attr("checked", "checked");
            $obj.parent().parent().parent().find(".city").each(function () {
                if ($("#checkedAll").attr("checked") != "checked") {
                    AllChecked = false;
                }
            });
            if (AllChecked == true) {
                $("#checkedAll").attr("checked", "checked");

            }
            //if (AllChecked == false) {
            //    $("#checkedAll").removeAttr("checked");
            //}
        }
    }
    function whenAllChecked($obj) {
        //alert($("#checkedAll").attr("checked"));
        if ($("#checkedAll").attr("checked") == "checked") {
            //$("#tableStu").find("input").removeAttr("checked");
            $("#tableStu").find("input").each(function () {
                $(this).attr("checked", "checked");
            });
        }
        else {
            $("#tableStu").find("input").each(function () {
                $(this).removeAttr("checked")
            });
            
            //$("#tableStu").find("input").attr("checked", "checked");
        }
    }
    function whenCityChecked($obj) {
        //alert($obj.attr("checked"));
        if ($obj.attr("checked") == "checked") {
            $obj.parent().parent().next('tr').find('input').each(function () {
                $(this).attr("checked", "checked");
            });
            var allcheck = true;
            $("#tableStu").find('.city').each(function () {
                if ($(this).attr("checked") != "checked") {
                    allcheck = false;
                }
            });
            if (allcheck) {
                $("#checkedAll").attr("checked", "checked");
            }
        }
        else {
            $obj.parent().parent().next('tr').find('input').each(function () {
                $(this).removeAttr("checked")

            });
            $("#checkedAll").removeAttr("checked");
        }



        //var AllChecked=true;
        //$obj.parent().parent().parent().find(".city").each(function () {
        //    if($(this).attr("checked")!="checked")
        //    {
        //        AllChecked = false;
        //    }
        //    if(AllChecked==true)
        //    {
        //        $("#checkedAll").attr("checked", "checked");
        //    }
        //})
    }
    $(function () {

    })
</script>

后台代码如下：

    public class CheckBoxController : Controller
    {
        //
        // GET: /CheckBox/

        public ActionResult Index()
        {
            List<STU> stuList = new List<STU>()
            {
                new STU{ID=1,Name="Lily",Age=18,City="NewYork"},
                new STU{ID=2,Name="Lucy",Age=20,City="NewYork"},
                new STU{ID=1,Name="LiLei",Age=18,City="BeiJing"}
             };
            ViewBag.CityList = stuList;
            return View();
        }
        
    }
    public class STU
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string City { get; set; }
    }

关键代码讲解：

1. ViewBag.CityList = stuList;通过ViewBag将列表数据传递到，前台页面中。
2. var tmp = ViewBag.CityList as List<STU>;获取后台传递过来的列表，并解析成List。
3. foreach...foreach 解析列表，按照城市进行分组，按照年龄的大小进行组内排序。详情见：C#中对泛型List进行分组输出元素
4. JQuery代码，当勾选每个学生选项时进行判断，如果同组的其他同学是否被勾选，如果有没有勾选的同学，则城市同样不被选中。

5.         $obj.parent().parent().find('input').each(function () {
               if ($(this).attr('Checked') != "checked") {
                   $obj.parent().parent().prev('tr').find('input').removeAttr('checked');
                  }
           });

   其中，prev方法用来查找前一个同胞元素（同级）。且如果checkbox被选中，该属性的值为checked，否则为undifined。

　　5. $("#checkedAll").removeAttr("checked");移除对某checkbox的选中，主要用于各选择元素之间的联动。

问题：最麻烦的是，处理各个元素之间的联动，如全选，或者选择某一城市，或者是选择某一单个同学，都将可能对其他checkbox产生影响。注意上面的JS代码有不完善的地方，请自行处理。