Question

如何使用angular 2 typescript中的函数取消选中复选框？

我添加了图片作为示例！

<div class="filter2">
              <label class="containe" 
              *ngFor="let veh of vehicleClassArr">
              {{veh}}
              <input type="checkbox" name="{{veh}}" value="{{veh}}" (change)="filterSearchResults($event, veh,'vehicleClass')">
                  <span class="checkmark"></span>
              </label>
  </div>

<div class="reset-btn">


<button class="filter-reset-btn" (click)="resetFilters()">Reset to Default</button>

</div>

[1]：https://i.stack.imgur.com/aPrMH.png

Answer 1

在您的vehicleClass对象中添加“已检查”的附加字段，并通过ngModel绑定到此

<div class="filter2">
          <label class="containe" 
          *ngFor="let veh of vehicleClassArr; let ndx=index;">
          {{veh}}
          <input id="myCheck{{ndx}}" type="checkbox" name="{{veh}}" value="{{veh}}" 
           [(ngModel)]="veh.checked" (change)="filterSearchResults($event, veh,'vehicleClass')">
              <span class="checkmark"></span>
          </label>
</div>

然后按如下方式调整方法resetFilters（）

private resetFilters(): void {
   this.vehicleClassArr.forEach(element => {
      element.checked = false;
   });
}

Answer 2

首先，您需要包含一个要显示的字符串属性的对象数组和一个布尔属性，即选中以检查和取消选中该复选框。

resetFilters(){
 this.vehicleClassArr.every(function(item:any) {
        return item.selected == false;
      })
}

<ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let veh of vehicleClassArr"> 
  <input type="checkbox" [(ngModel)]="veh.selected">
  {{veh.name}}
  </li>
</ul>
<button class="filter-reset-btn" (click)="resetFilters()">Reset to Default</button>

Answer 3

要控制打字稿中的复选框，你必须使用这样的东西

var element = <HTMLInputElement> document.getElementById("IDOfCheckbox");
element.checked = true;

如何使用angular 2打字稿中的函数取消选中复选框？

3 个答案: