使用jQuery实现 点击标签隐藏/显示里面内容，复选框全选和取消全选，有一个取消选中 全选也取消，所有的都选中，全选也选中
<script>
$(
function(){
//动态添加复选框
$("#ulTop>li").prepend("<input type='checkbox' ></input>");
$("#ulTop>li ul li").prepend("<input type='checkbox'></input>");
//外面全选复选框的checked值和里面的复选框的checked值一样,实现全选和全不选功能
$("#ulTop>li>input").click(function() {
$(this).parent().find("ul").find("li").find("input[type='checkbox']").attr("checked",$(this).prop("checked"));
});
//取消一个里面的复选框,全选消失,里面的两个复选框都选中,全选也选中
$("ul li ul li input").each(
function(){
$(this).click(
function(){
var bln = true;
$(this).parent().parent().find("input[type='checkbox']").each(//$(this).parent().parent().find("input[type='checkbox']");
function(){
bln = bln && this.checked;//bln=bln&&this.checked;
}
);
$(this).parent().parent().parent().children("input").prop("checked",bln);
}
);
}
);
//点击span标签,出现/隐藏里面的内容
$("ul li span").css("cursor","pointer");
$("ul li ul").css("display","none");
$("ul li span").click(
function()
{
var uli=$(this).parent().children("ul");
if(uli.css("display")=="none"){
uli.css("display","block");
}else{
uli.css("display","none");
}
}
);
}
);
</script>
<style>
ul,li{list-style: none;}
</style>
</head>
<body>
<ul id="ulTop" >
<li class="li1">
<span>人事部</span>
<ul>
<li>第一个人</li>
<li>第二个人</li>
</ul>
</li>
<li >
<span>财务部</span>
<ul>
<li>钱多多</li>
<li>钱真多</li>
</ul>
</li>
<li >
<span>招生部</span>
<ul>
<li>招生部第一个人</li>
<li>招生部第二个人</li>
</ul>
</li>
</ul>
</body>
</html>
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
