<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul{
list-style: none;
}
.menu{
display: none;
}
</style>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<ul>
<li>
<input type="checkbox" name="checkbox" class="allchose" /><span>车队1</span><span class="btn"> +</span>
<ul class="menu">
<li>
<input type="checkbox" name="checkbox1" />1号车
</li>
<li>
<input type="checkbox" name="checkbox2" />2号车
</li>
<li>
<input type="checkbox" name="checkbox3" />3号车
</li>
<li>
<input type="checkbox" name="checkbox4" id="checkbox4" />4号车
</li>
</ul>
</li>
<li>
<input type="checkbox" name="checkbox" class="allchose" /><span>车队2</span><span class="btn"> +</span>
<ul class="menu">
<li>
<input type="checkbox" name="checkbox1" />1号车
</li>
<li>
<input type="checkbox" name="checkbox2" />2号车
</li>
<li>
<input type="checkbox" name="checkbox3" />3号车
</li>
<li>
<input type="checkbox" name="checkbox4" id="checkbox4" />4号车
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn').click(function(){
var $menu = $(this).siblings('.menu');
var flag = $menu.is(':hidden');
if(flag){
$menu.slideDown(200);
}else{
$menu.slideUp(200);
};
});
$('.allchose').click(function(){
var t = $(this).siblings('.menu').find("input[type='checkbox']");
if($(this).is(":checked")){
t.prop("checked",true);
console.log('我已经被旋转');
}else{
t.prop("checked",false);
}
})
})
</script>
<script>
</script>
</html>
