checkbox级联选择，选择地区后自动勾选该地区内的学校

效果：点击地区，自动勾选对应地区的学校，点击清空清空所有选择。

<div class="input_select_a">
        <b>筛选地区：</b>
        <span class="choice_areas"></span>
    </div>
    <div class="input_select_b">
        <b>筛选学校：</b>
        <span class="choice_schools"></span>
    </div>
    <div class="schools_clear" style="float:right; margin-left: 10px">
        <button class="btn btn-warning" style="float:left; margin-top: 10px">清空</button>
    </div>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="backbone.js"></script>
    <script type="text/javascript" src="jquery.cookie.min.js"></script>
    <script>
        var areas = [];
        var areasAndSchs = [];
        // 数据展示
        var renderData = function(){
            $.ajax({
                type: "get",
                url: "https://www.fastmock.site/mock/7b96d2ed6c69241f607d7622c5facc36/userList/schMsg",//需要用来处理ajax请求的action
                dataType: "json",//设置需要返回的数据类型
                success: function (res) {
                    res = res.data;
                    //增加filter 学区筛选条件
                    var choice_areasHtml = "";
                    var schs = res[0].schs;
                    //将学区和对应的学校组成一个对象放入数组中
                    for(var i = 0;i < schs.length;i++){
                        var tmpArea = schs[i].area;
                        if(areas.indexOf(tmpArea) < 0){
                            areas.push(tmpArea);
                            var obj = {};
                            var schInArea = [];
                            schInArea.push(schs[i].schAlias);
                            obj.area = tmpArea;
                            obj.schools = schInArea;
                            areasAndSchs.push(obj);
                            choice_areasHtml +='<span><input type="checkbox" checked="checked">'+tmpArea+'</span> ';
                        }else{
                            var schools;
                            for(var j = 0;j < areasAndSchs.length;j++){
                                if(areasAndSchs[j].area == tmpArea){
                                    schools = areasAndSchs[j].schools;
                                    schools.push(schs[i].schAlias);
                                    areasAndSchs[j].schools = schools;
                                    break;
                                }
                            }
                            continue;
                        }
                    }
                    console.log(areasAndSchs);
                    $('.choice_areas').html(choice_areasHtml);

                    //增加filter 学校筛选条件
                    var choice_schoolsHtml = "";
                    _.each(res[0].schs,function(oneSch){
                        var name = oneSch.schAlias;
                        var schId = oneSch.schId;
                        choice_schoolsHtml +='<span><input type="checkbox" checked="checked" value='+ schId +'>'+name+'</span> ';
                    })

                    $('.choice_schools').html(choice_schoolsHtml);
                },
                error: function () {
                    alert("系统异常，请稍后重试！");
                }
            });
        }
        renderData();
        // function chooseArea(this){}
        $("body").delegate(".choice_areas input", "click", function () {
            //获取选择的校区
            if ($(this).is(":checked")) {
                $(this).prop("checked",true);
                //获取校区名
                var areaName = $(this).parent("span").text();
                //获取该校区内的学校
                for(var i = 0;i < areasAndSchs.length;i++){
                    if(areasAndSchs[i].area == areaName){
                        var schools = areasAndSchs[i].schools;
                        for(var j = 0;j < schools.length;j++){
                            _.each($(".choice_schools input"),function(oneInput){
                                //如果学校名在该区域内，则勾选该学校
                                if($(oneInput).parent("span").text() == schools[j]){
                                    $(oneInput).prop("checked",true);
                                }
                            })
                        }
                        break;
                    }else{
                        continue;
                    }
                }
            }else{
                var areaName = $(this).parent("span").text();
                //获取该校区内的学校
                for(var i = 0;i < areasAndSchs.length;i++){
                    if(areasAndSchs[i].area == areaName){
                        var schools = areasAndSchs[i].schools;
                        for(var j = 0;j < schools.length;j++){
                            _.each($(".choice_schools input"),function(oneInput){
                                //如果学校名在该区域内，则勾选该学校
                                if($(oneInput).parent("span").text() == schools[j]){
                                    $(oneInput).prop("checked",false);
                                }
                            })
                        }
                        break;
                    }else{
                        continue;
                    }
                }
            }
        })
        $("body").delegate(".choice_schools input", "click", function () {
            //获取选择的校区
            if ($(this).is(":checked")) {
                $(this).prop("checked",true);

            }
        })
        $("body").delegate(".schools_comit","click",function(){
            //获取选择的学区
            _.each($(".choice_areas input"),function(oneInput){
                if($(oneInput).is(":checked")){
                    $(oneInput).prop("checked",true);
                }
            })
            //获取选择的学校
            _.each($(".choice_schools input"),function(oneInput){
                // console.log("####")
                if($(oneInput).is(":checked")){
                    $(oneInput).prop("checked",true);
                }
            })
        })
        $("body").delegate(".schools_clear","click",function(){
            //清空学区选择
            _.each($(".choice_areas input"),function(oneInput){
                // console.log("####")
                if($(oneInput).is(":checked")){
                    $(oneInput).prop("checked",false);
                }
            })
            //清空学校选择
            _.each($(".choice_schools input"),function(oneInput){
                // console.log("####")
                if($(oneInput).is(":checked")){
                    $(oneInput).prop("checked",false);
                }
            })
        })
    </script>