Angular 2:单击该div外部的按钮时选择所有复选框

时间:2018-03-19 09:09:55

标签: angular typescript checkbox

我的任务是选中所有复选框(检查它),同时获取每个复选框的ID,我在下面给出的ID代码

在div旁边点击复选框所在的div

HTML

 <li  class="on-hov" *ngFor="let confirmedOrders of confirmedOrder | async|  search:'id,order_shop_no':query let i = index" >
                            <div class="row">
........................
....................



<div class="col-sm-5 text-right right-actions">
    <a class="select-all" (click)="showallDeleteCheckbox($event)">Select All</a>
</div>
............
..........
 <div *ngIf = "shown"><input  type="checkbox" id="{{confirmedOrders.order_id}}"  class="del-all"></div>
............
.............

.TS

  private confirmedOrder: Observable<any>;
..............
..............
self.confirmedOrder = self.storeService.getConfirmedOrder(self.shopId);
   self.confirmedOrder.subscribe((res:any) => {
   self.confirmed_array_length = res.length;
..............
..............
    howallDeleteCheckbox(ev){
  var self = this;
  self.shown = true;
  console.log('orderlength',self.confirmed_array_length);
  for (var i = 0; i < self.confirmed_array_length; i++) {
    self.confirmedOrder[i].selected = self.selectedAll;
    console.log("im here", self.confirmedOrder[i].selected);
  }


}
.............

1 个答案:

答案 0 :(得分:0)

如果你想删除DOM的所有复选框,那么你可以借助javascript

来完成
removeAllSelectedCheckBoxes() {
    var checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
    for(let i=0; i<checkedBoxes.length; i++) {
      checkedBoxes[i].parentNode.removeChild(checkedBoxes[i]);
    }
}

注意:javascript代码适用于打字稿。