多层复选框

最新推荐文章于 2023-12-25 17:50:09 发布

ywmadonis

最新推荐文章于 2023-12-25 17:50:09 发布

阅读量1.2k

点赞数 1

分类专栏： TypeScript

本文链接：https://blog.csdn.net/ywmadonis/article/details/79479082

版权

TypeScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

template

<div>
  <label><input type="checkbox" [(ngModel)]="checked" (change)="selectAll()">全选</label>
  <div style="padding-left:1em" *ngFor="let item of datas">

    <label><input type="checkbox" [(ngModel)]="item.checked" (change)="selectItemAll(item)">全选</label>


    <div style="padding-left:1em" *ngFor="let item1 of item.items">
      <label><input type="checkbox" [(ngModel)]="item1.checked" (change)="selectItem(item1,item)">选择</label>
      名称：{{item1.name}} 价格：{{item1.price}}
    </div>
    

  </div>
  总价：{{getTotal()}}
</div>

ts

export class CheckboxComponent implements OnInit {

  checked = false;
  datas = [{
    checked: false,
    items: [{
      checked: false,
      name: '商品11',
      price: 2
    }, {
      checked: false,
      name: '商品12',
      price: 3
    }]
  }, {
    checked: false,
    items: [{
      checked: false,
      name: '商品21',
      price: 2
    }, {
      checked: false,
      name: '商品22',
      price: 3
    }]
  }];
  getTotal() {
    return this.datas.reduce((state, item) => {
      return item.items.reduce((state, item1) => {
        return state + (item1.checked ? item1.price : 0);
      }, state);
    }, 0);
  }
  selectAll() {
    this.datas.forEach(item => {
      item.checked = this.checked;
      item.items.forEach(item1 => {
        item1.checked = this.checked;
      });
    });
  }
  selectItemAll(item) {
    item.items.forEach(item1 => {
      item1.checked = item.checked;
    });
    if (!item.checked) {
      this.checked = false;
    } else {
      this.checked = this.datas.reduce((prev, item) => prev && item.checked, true);
    }
  }
  selectItem(item, parent) {
    if (!item.checked) {
      parent.checked = this.checked = false;
    } else {
      parent.checked = parent.items.reduce((prev, item) => prev && item.checked, true);
      if (parent.checked) {
        this.checked = this.datas.reduce((prev, item) => prev && item.checked, true);
      } else {
        this.checked = false;
      }
    }
  }



  constructor() { }

  ngOnInit() {
  }

}