效果：点击地区，自动勾选对应地区的学校，点击清空清空所有选择。
<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>