直接上代码吧:
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);
}
})
运行起来看看效果呗~~