Jquery实现TreeGrid的效果【多级checkbox逻辑】

直接上代码吧：

HTML:

	<section style="display: flex;">
		<div>TreeGrid：</div>
		<div style="flex: 1">
			<p style="margin-top: 0;">
				<input class="all-check" type="checkbox" name="vehicle" value="Bike" />全选</p>

			<div style="background: pink;margin-bottom: 10px;">
				<input class="box2" type="checkbox" name="vehicle" value="Bike" />动漫
				<span class="toggleChild" style="float: right;">点击</span>

				<div class="child" style="display: none">
					<p style="background: #ebfaeb;padding-left: 20px;margin:0">
						<input type="checkbox" name="vehicle" value="Bike" />火影忍者</p>
					<p style="background: #ebfaeb;padding-left: 20px;margin:0">
						<input type="checkbox" name="vehicle" value="Bike" />海贼王</p>
					<p style="background: #ebfaeb;padding-left: 20px;margin:0">
						<input type="checkbox" name="vehicle" value="Bike" />死神</p>
				</div>
			</div>



			<div style="background: pink;margin-bottom: 10px;">
				<input class="box2" type="checkbox" name="vehicle" value="Bike" />电影
				<span class="toggleChild" style="float: right;">点击</span>

				<div class="child" style="display: none">
					<p style="background: #ebfaeb;padding-left: 20px;margin:0">
						<input type="checkbox" name="vehicle" value="Bike" />速递与激情</p>
					<p style="background: #ebfaeb;padding-left: 20px;margin:0">
						<input type="checkbox" name="vehicle" value="Bike" />哈利波特</p>
				</div>
			</div>
	</section>

JS：【记得引入jquery】

	$('.toggleChild').click(function () {
		$(this).siblings('.child').slideToggle(500);
		var ss = $(this).siblings('.child').children('input');
	})
	//全选
	$('.all-check').click(function () {
		console.log(1);
		console.log($(this).prop("checked"))
		if ($(this).prop("checked")) {
			console.log(2);
			$("input[name='vehicle']").prop("checked", true);
		} else {
			console.log(3);
			$("input[name='vehicle']").prop("checked", false);
		}
	})
	// 二级input选择
	$('.box2').on('click',function(){
		var index = $('.box2').index($(this));
		// 控制父级是否选择
		var bool = false;
		for(var i = 0; i < $('.box2').length; i++){
			if($('.box2').eq(i).is(":checked")){
				bool = true;
			}else{
				bool = false;
				break;
			}
		}
		if(bool){
			$('.all-check').prop('checked',true);
		}else{
			$('.all-check').prop('checked',false);
		}
		// 控制子级选择
		if($('.box2').eq(index).is(":checked")){
			for(var j = 0; j < $('.box2').eq(index).siblings('.child').children().length; j++){
				$('.box2').eq(index).siblings('.child').children().eq(j).children('input').prop('checked',true);
			}
		}else{
			for(var j = 0; j < $('.box2').eq(index).siblings('.child').children().length; j++){
				$('.box2').eq(index).siblings('.child').children().eq(j).children('input').prop('checked',false);
			}
		}
	})
	// 三级input选择
	$('.child input[type=checkbox]').on('click', function () {
		var bool = false;
		for(var i = 0; i < $(this).parent().parent().children().length; i++){
			if($(this).parent().parent().children().eq(i).children().eq(0).is(":checked")){
				bool = true;
			}else{
				bool = false;
				break;
			}
		}
		if(bool){
			$(this).parent().parent().siblings('.box2').prop('checked',true)
		}else{
			$(this).parent().parent().siblings('.box2').prop('checked',false)
		}
		// 检查二级input
		var bool1 = false;
		for(var j = 0; j < $('.box2').length; j++){
			if($('.box2').eq(j).is(':checked')){
				bool1 = true
			}else{
				bool1 = false;
				break;
			}
		}
		if(bool1){
			$('.all-check').prop('checked',true);
		}else{
			$('.all-check').prop('checked',false);
		}
	})

运行起来看看效果呗~~