求助 JQ实现复选框全选与全取消

<divclass="treewell"><ul><li><span><iclass="icon-font"></i>   <in... <div class="tree well">
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item" onclick="chickbox(this)"> 一级分类</span>
<ul>
<li>
<span ><i class="icon-font"></i>   <input type="checkbox" name="item" onclick="chickbox()"> 二级分类</span>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item" onclick="chickbox(this)"> 一级分类</span>
<ul>
<li>
<span ><i class="icon-font"></i>   <input type="checkbox" name="item" onclick="chickbox()"> 二级分类</span>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i>   <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

一级分类选中则他的二级三级全选中
如果二级取消选中则一级也取消
三级取消选中它的二级一级均取消
求助大神！自己写了好半天没弄出来。。。 JQuery 实现
分数只有5分了.... 展开

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

惜需满n
推荐于2016-06-27 · TA获得超过476个赞

知道小有建树答主

回答量：399

采纳率：0%

帮助的人：343万

我也去答题访问个人页

关注

展开全部

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="../lib/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function() {
var categoryBoard = $('.tree');

function checkCategory(e) {
var $self = $(this),
checked = $self.prop('checked');
if (checked) {
$self.parent().siblings('ul').find(':checkbox[name=item]').prop('checked', true);
} else {
$self.parents('li').children('span').find(':checkbox[name=item]').prop('checked', false);
}
}

categoryBoard.on('click', ':checkbox[name=item]', checkCategory);
});
</script>
<title>Document</title>
</head>
<body>
<div class="tree well">
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 一级分类</span>
<ul>
<li>
<span ><i class="icon-font"></i> <input type="checkbox" name="item"> 二级分类</span>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 一级分类</span>
<ul>
<li>
<span ><i class="icon-font"></i> <input type="checkbox" name="item"> 二级分类</span>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
<ul>
<li>
<span><i class="icon-font"></i> <input type="checkbox" name="item"> 三级分类</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

追问

哥，十分感谢 太感谢了。就是还有一个问题 我一个类目全选了 我在次点击应该是全取消 哥 能帮我加一下么！

追答


	$(function() {
		var categoryBoard = $('.tree');
		
		function checkCategory(e) {
			var $self = $(this),
				checked = $self.prop('checked');
			if (checked) {
				$self.parent().siblings('ul').find(':checkbox[name=item]').prop('checked', true);
			} else {
				$self.parents('li').children('span').find(':checkbox[name=item]').prop('checked', false);
				$self.parent().siblings('ul').find(':checkbox[name=item]').prop('checked', false);
			}
		}
		categoryBoard.on('click', ':checkbox[name=item]', checkCategory);
	});

本回答被提问者采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求助 JQ实现 复选框 全选 与全取消

为你推荐：

求助 JQ实现复选框全选与全取消