如果我有两个复选框，我该怎么做才能使一个被选中另一个未被选中？

Question

我正在开发一款应用，其中一个页面要求用户选择通过信用卡/信用卡或现金付款。我想让它不能同时选中两个复选框（如果选中一个，则另一个未选中）。

我尝试使用 ionChange 进行事件，这样如果其中一个被选中，其他复选框的布尔值就会变为 false。

HTML

 <ion-item>
    <ion-label>Credit/Debit Card (N/A)</ion-label>   
    <ion-checkbox item-start [(ngModel)]='CC' (ionChange)="checked()"></ion-checkbox>
  </ion-item>
  <br/><br/>

  <ion-item>
    <ion-label>Cash</ion-label>
    <ion-checkbox item-start [(ngModel)]='Cash' (ionChange)="checked()"></ion-checkbox>
  </ion-item>

打字稿

 Cash = false;    
  CC = false;      

  checked(){
    if(this.Cash == true){
      this.CC = false;
    }

    if(this.CC == true){
      this.Cash = false
    }
  }

我预计这会起作用，但仍然可以选中这两个框。

Answer 1

这个问题有一个非常好的答案，有不同的方法here

Answer 2

解决这个问题的最好方法是使用 Radio-button 而不是 Checkbox 。但是如果你想 通过复选框执行此操作，而不是代码如下：-

HTML

 <input type="checkbox" name="1" [(ngModel)]="check1"
 (change)="onchange($event)"/>
 {{check1}}


 <input type="checkbox" name="2" [(ngModel)]="check2"
  (change)="onchange1($event)"/>
 {{check2}}

打字稿

export class AppComponent {

  check1: boolean;
  check2: boolean;

  onchange(event: any) {
    if (this.check1 == !event.target.checked) {
      this.check2 = true;
    }
    else {
      this.check2 = false;
    }
  }

  onchange1(event: any) {
    if (this.check2 == !event.target.checked) {
      this.check1 = true;
    }
    else {
      this.check1 = false;
    }
  }
}

希望它适合你。