以下代码实现以下功能：
双层checkbox
父级checkbox选中时，子级checkbox全部选中
父级checkbox取消时，子级checkbox全部取消
同时保留子级checkbox点击取消、添加功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个checkbox的demo</title>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<h4>我的书籍：</h4>
<div v-for="(item,index) in mybooks" :key="index" style="border-bottom: dashed 1px #666;margin-bottom:1rem;overflow: hidden;padding-bottom: 1rem; width: 300px;">
<div>
<input type="checkbox" :value="item.catename" @change="selectAllSon(index,$event)">
<b>{{item.catename}}：</b>
</div>
<div>
<span v-for="(itemn,indexn) in item.content" :key="indexn">
<input type="checkbox" :value="itemn" v-model="selectedBooks[index]" @change="checkvalue()">
<label for="">{{itemn}}</label>
</span>
</div>
</div>
</div>
{{selectedBooks}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
mybooks:[
{
'catename':'人文类书籍',
'content':['《诗经》','《九歌》']
},
{
'catename':'技术类书籍',
'content':['《PHP从入门到放弃》','《删库跑路》']
},
],
selectedBooks:[[],[]]
},
methods:{
selectAllSon:function(index,event){
var ischecked =event.target.checked;
var cateTwo = this.mybooks[index].content;
if(ischecked){
for(let i=0;i<cateTwo.length;i++){
var pushingitem = this.mybooks[index].content[i];
if(this.selectedBooks[index].indexOf(pushingitem)==-1){
this.selectedBooks[index].push(this.mybooks[index].content[i]);
this.$forceUpdate();
}
}
}else{
for(let i=cateTwo.length;i>0;i--){
this.$delete(this.selectedBooks[index],i-1);
this.$forceUpdate();
}
}
},
checkvalue(){
this.$forceUpdate();
}
}
})
</script>
</body>
</html>
