要实现的效果是:1)点击大区出现对应省市,点击省市出现对应的市区;2)取消大区,对应的省市消失;取消省,对应的市区消失;3)当所有的大区都没有选中时,省市,市区都选项都取消且消失。省市全部取消选项时同理。
<div class="form-group" id="daqu" style="display: none; background: #f4f4f4; border-top:1px solid #ddd; position: relative; padding-top:30px;
padding-bottom: 30px; margin-bottom: 0; top:-2px;">
<div class="form-group">
<label class="col-xs-12 col-sm-3 col-md-1 control-label" style="width: auto;">大 区:</label>
<div class="col-sm-10" style="margin-left: 2.5%;" id="test">
<label class="checkbox pull-left col-xs-2" style="width: auto"><input name="selecAll0" type="checkbox" value="0" class="all_check" id="check">
全选 </label>
<volist name="seven" id="vo">
<label class="checkbox pull-left col-xs-2" style="width: auto">
<input name="region[]" type="checkbox" value="{$vo.id}" />{$vo.region}
</label>
</volist>
</div>
</div>
<div class="form-group none">
<label class="col-xs-12 col-sm-3 col-md-1 control-label" style="width: auto;">省/市:</label>
<div class="col-sm-10 shengshi sheng" style="margin-left: 2.5%;">
<label class="checkbox pull-left col-xs-2" style="width: auto"><input name="selecAll1" type="checkbox" value="0" class="all_check">全选 </label>
</div>
<div class="zhan"><span class="icon_blue"></span> 展开</div>
</div>
<div class="form-group none">
<label class="col-xs-12 col-sm-3 col-md-1 control-label" style="width: auto;">市/区:</label>
<div class="col-sm-10 shengshi" id="shi" style="margin-left: 2.5%;">
<label class="checkbox pull-left col-xs-2" style="width: auto"><input name="selecAll2" type="checkbox" value="0" class="all_check">全选</label>
</div>
<div class="zhan"><span class="icon_blue"></span> 展开</div>
</div>
</div>
// //大区选择全选与反选
$("#test input").on("change", function() {
var myAttr = $(this).val();
if($(this).hasClass("all_check") && $(this).prop("checked")) {
$(".sheng").parent().show();
$(this).prop("checked", "true");
var inputs = $(this).parent().siblings().find("input");
inputs.prop("checked", true);
setProc(myAttr);
$(".sheng").html('<label class="checkbox pull-left col-xs-2" style="width: auto"><input name="selecAll1" type="checkbox" value="0" class="all_check">全选 </label>');
} else if($(this).is(".all_check")) {
$(".sheng").parent().show();
$(this).removeAttr("checked");
$(this).parent().siblings().find("input").removeAttr("checked");
$(".sheng").empty();
$(".sheng").parent().hide();
$("#shi").empty();
$("#shi").parent().hide();
} else if($(this).prop("checked")) {
$(".sheng").parent().show();
setProc(myAttr);
} else {
$(".sheng").parent().show();
$(".province" + myAttr + "").remove();
if($(".sheng label").length <= 1) {
$(".sheng").parent().hide();
$("#shi").empty();
$("#shi").parent().hide();
}
}
})
//省填充函数
function setProc(sidCon) {
$.ajax({
type: "get",
url: "{:U("getProvince")}",
async: true,
data: {
"sid": sidCon
},
success: (function(data) {
var data = JSON.parse(data);
var str = '';
$.each(data, function(key, val) {
str += '<label class="checkbox pull-left col-xs-2 province' + val.sid + '" style="width: auto"><input name="province[]" type="checkbox" value="' + val.id + '">' + val.province + '</label>';
});
$(".sheng").append(str);
})
});
}
//市填充数据
function setCity(myAttr) {
$.ajax({
type: "post",
url: '{:U("getCity")}',
async: true,
data: {
"province": myAttr
},
success: (function(data) {
var data = JSON.parse(data);
var str = '';
$.each(data, function(key, val) {
str += '<label class="checkbox pull-left col-xs-2 city' + val.pid + '" style="width: auto"><input name="city[]" type="checkbox" value=' + val.id + '>' + val.city + '</label>';
});
$("#shi").append(str);
})
});
}
//城市判断
$(".sheng").on("change", 'input', function() {
$("#shi").parent().show();
var myAttr = $(this).val();
if($(this).hasClass("all_check") && $(this).prop("checked")) {
$("#shi").parent().show();
$(this).prop("checked", "true");
var inputs = $(this).parent().siblings().find("input");
inputs.prop("checked", true);
var arr = [];
$(this).parent().siblings().each(function() {
arr.push($("input", $(this)).val())
})
setCity(arr.join(","));
$("#shi").html('<label class="checkbox pull-left col-xs-2" style="width: auto"><input name="selecAll2" type="checkbox" value="0" class="all_check">全选 </label>');
} else if($(this).is(".all_check")) {
$("#shi").parent().show();
$(this).removeAttr("checked");
$(this).parent().siblings().find("input").removeAttr("checked");
$("#shi").empty();
$("#shi").parent().hide();
} else if($(this).prop("checked")) {
setCity(myAttr);
} else {
$(".city" + myAttr + "").remove();
if($("#shi label").length <= 1) {
$("#shi").parent().hide();
}
}
})
$("#shi").on("change", 'input', function() {
if($(this).hasClass("all_check") && $(this).prop("checked")) {
$("#shi").parent().show();
$(this).prop("checked", "true");
var inputs = $(this).parent().siblings().find("input");
inputs.prop("checked", true);
} else if($(this).is(".all_check")) {
$("#shi").parent().show();
$(this).removeAttr("checked");
$(this).parent().siblings().find("input").removeAttr("checked");
}
})
// 省市关闭,展开
$(".zhan").click(function() {
$(this).prev().toggleClass("my-height");
})