一个类似职位选择的二级多选

demo:

html:

<div class="get-checkbox-content left">
<span class="btn1 btn">经营管理类<span class="right">></span></span>
<span class="btn2 btn">销售招商类<span class="right">></span></span>
<span class="btn3 btn">采矿类<span class="right">></span></span>
<span class="btn4 btn">冶炼加工类<span class="right">></span></span>
<span class="btn5 btn">项目管理类<span class="right">></span></span>
</div>

<div class="get-checkbox-content2 left">

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总经理</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>首席技术官</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>运营主管</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总经理助理</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他经营管理类</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>销售总监</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>销售经理</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>电话销售</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>大客户经理</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他销售类</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>矿长/副矿长</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>选矿工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>采矿工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他采矿类</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>冶炼工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>机械工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>电气工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铸造工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他冶炼类</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目总监</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目经理</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目主管</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目工程师</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目工程师2</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他管理类</label></div>
</form>
</div>

<script type="text/javascript">
$(".btn").click(function() {
$(".checkbox_list").hide();
$(".checkbox_list").eq($(this).index()).show();
})

$(".content_checkbox").click(function() {
if($(".get-checkbox").children("span").length >= 5) {
alert("请注意！最多只能选择五种不同的短信");
return false;
}

if($(this).is(':checked') == true) {
$(".get-checkbox").append('<span style="text-align:start;">' + $(this).next().text() + '<img src="icon/close.gif" class="close"/></span>')
} else {
$(".get-checkbox").children("span:last-child").remove()
}

$(".close").click(function() {
$(this).parent("span").remove();
var content = $(this).parent("span").text();
// var content = content1.substr(0, content1.length-1);
for(var x = 0; x < $(".content_checkbox").length; x++) {
if($(".content_checkbox").eq(x).next().text() == content) {
$(".content_checkbox").eq(x).attr("checked", false);
}
}
})
})

function text() {}
</script>