Question

我正在使用角度4。我在一个组中有两个复选框，我想确保只能选中其中一个，并且可以取消选择两者。因此，如果一个被选中，则另一个必须被取消选中。我写了下面的代码。我只想一次从这些复选框中选择一次。

<div class="btn-group-toggle w-100 Filtertogglebtns d-block d-md-none" data-toggle="buttons">
                              <label class="btn btn-light mr-2">
                                <input type="checkbox" name="filteroptions" id="option1" autocomplete="off"> <i class="fa fa-long-arrow-up"></i>
                              </label>
                              <label class="mt-md-0 btn btn-light">
                                <input type="checkbox" name="filteroptions" id="option2" autocomplete="off"> <i class="fa fa-long-arrow-down"></i>
                              </label>
                            </div>

我想要这样的reference link，但要使用角度4。请为此提供帮助。

Answer 1

在您的ts中：

     change1(){
  if(this.checkbox1){
    this.checkbox2 = false;
    this.checkbox1 = false;
    }
else{
    this.checkbox2 = false;
    this.checkbox1 = true;
}

  }
  change2(){
    if(this.checkbox2){
        this.checkbox2 = false;
        this.checkbox1 = false;
    }
    else{
        this.checkbox2 = true;
        this.checkbox1 = false;
    }
  }

在您的html中：

<div class="btn-group-toggle w-100 Filtertogglebtns d-block d-md-none" data-toggle="buttons">
    <label class="btn btn-light mr-2">
      <input [(ngModel)]="checkbox1" (click) = "change1()" type="checkbox" name="filteroptions" id="option1" autocomplete="off"> <i class="fa fa-long-arrow-up"></i>
    </label>
    <label class="mt-md-0 btn btn-light">
      <input [(ngModel)]="checkbox2" (click) = "change2()"  type="checkbox" name="filteroptions" id="option2" autocomplete="off"> <i class="fa fa-long-arrow-down"></i>
    </label>
  </div>

在角度4的组中仅选择一个复选框

1 个答案: