js动态添加复选框&动态勾选对应的值

    最近在做组织部项目中,遇到了一个棘手的问题,选择县市区类型的时候将查出的县市区数据动态添加到界面中(如图所示:霸州县、永清县),选择年份的时候,将该类型以及该年份下设置为考核对象的信息勾选,如下图:

    我的HTML代码:

-
<a>请选择县(市、区)类型:</a>
        <input id="CityObjectType" class="easyui-combobox" name="checkType"
            data-options="valueField:'id',textField:'text',url:'/SetCityObject/queryType',onSelect:function(){
                    QueryCityObjcetByType(); 
                    }" />
-

-
        <a>请选择考核年份:</a>
        <input id="CityCheckYear" class="easyui-combobox" name="checkType"
            data-options="valueField:'CheckYearvalue' ,textField: 'CheckYeartext',
            onSelect:function(){
                QueryCityObjectByYearType('CityObjectcb', this.checked);
            }" />
-

-
        @*动态添加基础信息div*@
        <div id="CityObjectcb"></div>
-

    我的js对应的代码(下面代码实现了js拼接input标签和lable标签实现的显示效果):

-
//根据县市区类型查询-马康-2016-3-6 1:07:20
function QueryCityObjcetByType() {
    //获取县市区类型
    var CityType = $('#CityObjectType').combobox('getValue');
    //判断县市区类型是否为空
    if (CityType == "") {
        $.messager.alert('提示', '请选择县市区类型!', 'warning');
        return;
    }
    $.post('/SetCityObject/QueryCityBasicInfoByType?CityType=' + CityType, {}, function (data) {
        //添加的时候先清除div中的数据
        $("#CityObjectcb").empty();
        //遍历向div中添加查询到的基础信息
        $.each(data, function (i, item) {
            //添加复选框以及对应的值
            $("#CityObjectcb").append(
                    "<input id="+item.CityID+" type='checkbox'>"+
                    "<label for="+item.CityID+">"+
                    item.CityName+
                    "</label>");
        });
    })   
}
-

    我的js对应代码(下面代码实现了将对应的数据勾选的效果):

-
//根据年份和县市区类型，查询县市区考核对象-马康-2016-3-6 1:07:06
function QueryCityObjectByYearType(domId,value) {

    //获取下拉框中的年份
    var CheckYear = $('#CityCheckYear').combobox('getValue');
    //判断年份是否为空
    if (CheckYear == "") {
        $.messager.alert('提示', '请选择年份!', 'warning');
        return;
    }
    //获取下拉框中县市区的类型ID
    var CityTypeID = $('#CityObjectType').combobox('getValue');
    //判断县市区类型是否为空
    if (CityTypeID == "") {
        $.messager.alert('提示', '请选择县市区类型!', 'warning');
        return;
    }

    //post提交查询的条件，并调用查询的方法，将查询到的信息返回回来
    $.post('/SetCityObject/QueryCityObjectByYearType?CheckYear=' + CheckYear + '&CityTypeID=' + CityTypeID, {}, function (data) {

        //获取界面上div中添加的基础信息的值
        var inputs = document.getElementById(domId).getElementsByTagName("input");
        //第一层循环，循环界面上系那是的div中的基础信息
        for (var i = 0; i < inputs.length; i++) {
            //首先将界面上的复选框去掉对勾
            inputs[i].checked = false;

            //循环判断设置为考核对象的进行勾选（用下面的循环遍历也可以）
            //for (var n = 0; n < data.length; n++) {
            //    //判断考核对象中是否有id
            //    if (inputs[i].id == data[n].CityID) {
            //        //如果有，将界面上的复选框勾选
            //        inputs[i].checked = true;
            //    }
            //}

            //通过解析返回的json，遍历将设置为考核对象的勾选
            $.each(data, function (n, item) {
                //判断考核对象中是否有id
                if (inputs[i].id == item.CityID) {
                    //如果有，将界面上的复选框勾选
                    inputs[i].checked = true;
                }
            });
        }
    })
}
-

    从开始的没有思路——思路清晰不知道代码如何实践——让人指点，有了方向——功能实现——对应的扩展功能实现，当大概功能实现的时候，心里美滋滋的，但是后面代码优化以及功能完善也是不可忽视的问题。
    深层次询问了指点我的人，他告诉我，是因为我没有实现过类似的功能，有了一次这样的实践，再遇到类似的也可以很快的做出来，这又是一层境界。
    当遇到类似的问题可以解决之后，自己如何去深入学习与之类似的功能，思考问题的时候应该从哪方面入手，这都是值得考究的学问啊。